HTML Tables

Roll up your sleeves and sharpen your minds as we unravel the mysteries of HTML tables, the ultimate blueprint for presenting data in a structured and visually appealing manner.

An HTML Table

The cornerstone elements of an HTML table are:

• <table>: The element that weaves the magic of the table into existence. It's like the skeleton of a grand bookshelf.
• <tr>: Representing a 'table row'. You might think of it as each shelf layer.
• <th>: Or 'Table header'. These are the bold words we employ to clarify what each column signifies.
• <td>: 'Table data', which are the individual cells of data. Picture them as an individual book on our shelf.

Without further ado, let's erect a basic table, a bookshelf of sorts. Here's how we'd put that together:

<table>
    <tr>
        <th>Book Title</th>
        <th>Author</th>
        <th>Year Published</th>
    </tr>
    <tr>
        <td>Adventures of Huckleberry Finn</td>
        <td>Mark Twain</td>
        <td>1884</td>
    </tr>
    <tr>
        <td>War and Peace</td>
        <td>Leo Tolstoy</td>
        <td>1869</td>
    </tr>
</table>

There we have it, a minimalist HTML bookshelf! A delightful sight indeed.

Table Attributes

Tables can also have certain attributes that tell the browser how it should be displayed.

Some attributes frequently associated with tables include:

• border: This outlines the border around your table cells.
• cellpadding: This adds space space between adjacent cells in an HTML table.
• cellspacing: This adds space between the content within a cell and the cell's borders.
• width and height: These set the dimensions of the table or a particular cell.

Let's spruce up our table by implementing these attributes.

<table border="1" cellpadding="5" cellspacing="0" width="100%">
    <tr>
        <th>Book Title</th>
        <th>Author</th>
        <th>Year Published</th>
    </tr>
    <tr>
        <td>Adventures of Huckleberry Finn</td>
        <td>Mark Twain</td>
        <td>1884</td>
    </tr>
    <tr>
        <td>War and Peace</td>
        <td>Leo Tolstoy</td>
        <td>1869</td>
    </tr>
</table>

That's how you can display nicely formatted data on your webpage using HTML tables.

Next, we'll delve into HTML Forms, which allow you to capture user input.