HTML – Tables

June 28, 2024

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 Comment » | Uncategorized | Tagged: , | Permalink
Posted by Josh Gahan

The Blog Returns

June 28, 2024

It has been almost 10 years since i last posted on this blog and alot has happened in that time. Websites i’ve created have come and gone. While i do have backups of those, they are no longer available online. What is though, is this blog of mine.

I created this blog to act as a record of my knowledge and also a resource to reference at a later date, and today that is exactly what i will continue to do as i begin my journey in learning HTML, CSS, Javascript, JQuery, Python, PHP and MySQL. There will also be Computer Science topics and Cyber Security topics at some point too.

If you found this blog welcome, it’s good to be back and i can’t wait to share and record my knowledge.

Leave a Comment » | Opinion | Tagged: , , , , , , , , | Permalink
Posted by Josh Gahan