HTML – Tables

The following is an example of how to construct a table using the following tags

  • <table>
  • <tr>
  • <td>
  • <th>
  • <theader>
  • <tbody>
  • <tfooter>

Tags have been explained in the comments contained in the code below:

<html>
    <head>
        <title>Tables</title>
    </head>
    <body>
        <!-- <table> used to create a table
            <thead> table headers sit inside this element
                <tr> starts a table row
                <td> contains the cell data
                <th> like td but contains the header
            <tbody> groups the body of the table content
            <tfooter> contains the table footer -->
        <table>
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Income</th>
                    <th>Expemditure</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>2nd January</th>
                    <td>285</td>
                    <td>48</td>
                </tr>
                <tr>
                    <th>3rd January</th>
                    <td>290</td>
                    <td>50</td>
                </tr>
                <tr>
                    <th>4th January</th>
                    <td>255</td>
                    <td>32</td>
                </tr>
                <tr>
                    <th>5th January</th>
                    <td>315</td>
                    <td>65</td>
                </tr>
                <tr>
                    <th>6th January</th>
                    <td>244</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>7th January</th>
                    <td>450</td>
                    <td>125</td>
                </tr>
                <tr>
                    <th>31st January</th>
                    <td>129</td>
                    <td>64</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td></td>
                    <td>7824</td>
                    <td>1241</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
The outcome of the preceding code. Note the footer data is not the actual sum, just an example
The outcome of the example code

Leave a Reply

Your email address will not be published. Required fields are marked *