HTML Tables

Within the <table> element, the <thead> attribute is always defined, and within the header, the <tr> attribute is located. The <tr> attribute stands for a Table row, which dictates how many columns (<td>) the table will have inside, which represent the table data. The next attribute defined in the table is <tbody>, which displays the rows. To enter a table header, we use the <th> attribute, as it emphasizes the word (uses bold font). The third attribute is <tfoot>, which is optional but welcome for calculations and represents the table footer. We can also use the <tr> and <td> sub-attributes within the footer.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tables – Basic and with Minimal CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <table border="1" cellpadding="6" cellspacing="0" width="100%">
        <caption>Sales by Department (Q1)</caption>
        <thead>
            <tr>
                <th scope="col">Department</th>
                <th scope="col">January</th>
                <th scope="col">February</th>
                <th scope="col">March</th>
                <th scope="col">Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="rowgroup" rowspan="2">Retail</th>
                <td>1,200 €</td>
                <td>1,350 €</td>
                <td>1,180 €</td>
                <td>3,730 €</td>
            </tr>
            <tr>
                <td>1,050 €</td>
                <td>1,220 €</td>
                <td>1,310 €</td>
                <td>3,580 €</td>
            </tr>
            <tr>
                <th scope="row">Web</th>
                <td>2,100 €</td>
                <td>2,280 €</td>
                <td>2,340 €</td>
                <td>6,720 €</td>
            </tr>
            <tr>
                <th scope="row">Note</th>
                <td colspan="4">Prices are rounded; they include Q1 discounts.</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th scope="row">Total</th>
                <td>4,350 €</td>
                <td>4,850 €</td>
                <td>4,830 €</td>
                <td>14,030 €</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

RESULT

Styling Rows (<tr>) vs. Cells (<td>)

When styling tables within the HTML code itself (using the style attribute), it is crucial to understand the difference between a row (<tr>) and a cell (<td> or <th>). While it might seem logical to write styles directly in the row, browsers only respect certain properties if they are written directly in the cell.

1. What do we write in the <tr> (Row) tag?

A row acts as a container for text, so properties concerning the text itself are usually successfully passed down (inherited) to all cells within it.

Font: Setting the font family (font-family), size (font-size), or weight (font-weight).
Text Color: The primary font color (color).
Alignment: Text direction (text-align: center, left, right).
Background Color: While background-color theoretically works on a row, certain settings in your main CSS (or simulator) might override it. If the color on the row doesn't "stick," move it to the cell.

2. What do we write in the <td> or <th> (Cell) tag?

A cell is the basic "building block" of a table. Anything that defines the physical shape and structure of an individual square must be written here.

Borders: This is the most common mistake – a row (<tr>) does not know how to draw borders. If you want a bordered table, you must always specify the border in each individual cell (<td>).
Inner Spacing (padding): To prevent text from touching the cell edges, we use padding. This property works exclusively at the cell level.
Reliable Background Color: If you want to be 100% sure that the background color will be visible (even if the simulator or main CSS uses strict rules), set the color directly in the <td> tag.

Golden Rule: If a style added to <tr> does not work, simply move it to <td>. The cell always has the final word in the browser.

HTML Tables Cheat Sheet

This table provides a quick reference for all key elements and attributes for creating structured tables.

Element/Attribute	Description	Example Code	Notes
`<table>`	Main container for the table.	`<table> ... </table>`	Contains <thead>, <tbody>, <tfoot>.
`<caption>`	Title or description of the table (displayed above the table).	`<caption>Sales 2024</caption>`	Important for accessibility.
`<thead>`	Table header (column titles).	`<thead><tr>...</tr></thead>`	Usually contains <th>.
`<tbody>`	Table content (data).	`<tbody><tr>...</tr></tbody>`	Main part of the table.
`<tfoot>`	Table footer (totals, notes).	`<tfoot><tr>...</tr></tfoot>`	Can also be placed before <tbody>.
`<tr>`	Table row (Table Row).	`<tr><td>...</td></tr>`	Does not contain data directly, only cells.
`<th>`	Header cell (Header Cell).	`<th>Name</th>`	Displayed bold and centered (by default).
`<td>`	Data cell (Table Data).	`<td>Data</td>`	Basic cell for content.
`colspan="n"`	Crosses multiple columns (horizontal).	`<td colspan="2">Total</td>`	Useful for merging headers or totals.
`rowspan="n"`	Crosses multiple rows (vertical).	`<td rowspan="2">Dept</td>`	Useful for merging categories.
`scope="col"`	Specifies that <th> is a column header.	`<th scope="col">Name</th>`	Important for screen readers.
`scope="row"`	Specifies that <th> is a row header.	`<th scope="row">Dept</th>`	Important for screen readers.
`border="1"`	Simple border around cells (old method).	`<table border="1">`	For modern styling use CSS (`border`).
`cellpadding`	Spacing between content and cell border.	`<table cellpadding="10">`	Replacement: CSS `padding` on `td`.
`cellspacing`	Spacing between cells.	`<table cellspacing="0">`	Replacement: CSS `border-collapse: collapse`.