December 13, 2018 · coding html

HTML Tables

Basic HTML tables

To create a simple table using HTML you can use the <table> function.

A table is made up of rows and collumns (data), to insert these into the table you can use the <tr> (table row) and <td> (table data) - these are both closed tag.

    <table>
        <tr>
            <td>2010-2013</td>
            <td>Cat Groomer at Short and Curlies</td>
        </tr>
        <tr>
            <td>2013-2015</td>
            <td>Cat Trainer at Cat and Cat and Co</td>
        </tr>
        <tr>
            <td>2015-2018</td>
            <td>Cat Whisperer at The Cat's Moew</td>
        </tr>
    </table>

this will give you a table like below

11-1

Table header rows

To insert a table header row into your table you will need to use the <thead> (table header) function. Remeber that you will need to add a table row <tr> to place your heading in as well as the number of heading cells you will need - using <th>, this is all within the <table> section of the code. Its important to keep the the correct sections of the table within the correct areas of the table. for instance the The header should stay within the <thead> section and the body of information should stay within the <tbody>.

    <h3>Work Experience</h3>
    <table>
        <thead>
            <tr>
                <th>Dates</th>
                <th>Work</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2010-2013</td>
                <td>Cat Groomer at Short and Curlies</td>
            </tr>
            <tr>
                <td>2013-2015</td>
                <td>Cat Trainer at Cat and Cat and Co</td>
            </tr>
            <tr>
                <td>2015-2018</td>
                <td>Cat Whisperer at The Cat's Moew</td>
            </tr>
        </tbody>
    </table>

This will display your table like below

22-1

The MDN website has alot of information on how to structure tables.

There are options to change the look of the table through html, but it is advised against. Using HTML to control the "look" of the table is deprecated, this is because the stlying of the table should be performed through CSS not HTML - because HTMl is for the structure of code.

Using HTML tables for layout

If you were wanting to do some basic layout changes to your website without using CSS it is possible using tables.

Using the following code I was able to change the layout of the picture and my basic information.

    <table>
        <tr>
           <td><img src="Images\hamilton.png" alt="kitten paws"></td>
           <td>   <h1>Amy BLANK</h1>
            <p><em><strong> <a href="https://www.catster.com/cat-behavior/what-is-cat-flehmen-response">Cat Extraordinaire🐈</a></strong></em></p>
            <p>28 year old female who loves nothing more than cats and naps - hit me up!</p></td> 
        </tr>
    </table>

It displays like this

44-1

If you wanted to add some extra spacing between your picture and the text you can do this by adding the cellspacing="20" attribute to the <table> element like below

    <table cellspacing="20">
        <tr>
           <td><img src="Images\hamilton.png" alt="kitten paws"></td>
           <td>   <h1>Amy BLANK</h1>
            <p><em><strong> <a href="https://www.catster.com/cat-behavior/what-is-cat-flehmen-response">Cat Extraordinaire🐈</a></strong></em></p>
            <p>28 year old female who loves nothing more than cats and naps - hit me up!</p></td> 
        </tr>
    </table>

55

HTML Table Code Challenge

While it is not advised to use html to style your website it is possible to use table options to change the layout.

You can create a nested table to display a two tables side by side.

Using the following code

<h3>Skills</h3>
<table border="1">
    <tr>
        <td>
                <table>
                        <tr>
                            <td>Petting</td>
                            <td>β˜…β˜…β˜…β˜…β˜…</td>
                        </tr>
                        <tr>
                            <td>Grooming</td>
                            <td>β˜…β˜…β˜…β˜…β˜…</td>
                        </tr>
                        <tr>
                            <td>Nutrition</td>
                            <td>β˜…β˜…β˜…β˜…β˜…</td>
                        </tr>
                    </table>            
        </td>
        <td>
                <table>
                        <tr>
                            <td>Bonding</td>
                            <td>β˜…β˜…β˜…β˜…β˜…</td>
                        </tr>
                        <tr>
                            <td>Fur Styling</td>
                            <td>β˜…β˜…β˜…β˜…β˜…</td>
                        </tr>
                        <tr>
                            <td>Acrobatics</td>
                            <td>β˜…β˜…</td>
                        </tr>
                    </table>
        </td>
    </tr>
</table>

66

As you can see the code is very long, this is why its not ideal to use HTML over CSS.

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket