Navigation
Learn the proper way to display data in rows and columns using HTML table elements.
Imagine trying to read a sports scoreboard or a bus schedule if all the numbers were just listed in one long, messy sentence. How would you ever find your team's score?
In HTML, tables are built from the outside in. Think of the <table> tag as a box that holds everything. Inside that box, we don't just throw data in; we organize it by rows using the <tr> (Table Row) tag. Within each row, we place our actual content inside cells. There are two types of cells: <th> (Table Header) for titles that are usually bold and centered, and <td> (Table Data) for the regular information. A table with rows and columns would have a total of cell tags nested inside the rows.
Let's create a grid to show game scores. 1. Start with the `<table>` container. 2. Create the first `<tr>` for the headers: `<th>Team</th>` and `<th>Score</th>`. 3. Create the second `<tr>` for the data: `<td>Lions</td>` and `<td>14</td>`. 4. Close the `</table>` tag.
Quick Check
If you want to add a third column to your table, which tag would you need to add inside every row?
Answer
You would add either a <th> or a <td> tag to every <tr>.
By default, HTML tables look 'naked'—they have no visible borders! To make them look like a real grid, we use CSS. The most important property is border-collapse. By default, browsers give every cell its own border, creating a messy double-line look. Setting `border-collapse: collapse;` merges these into single, clean lines. We also use padding (e.g., ) to create 'breathing room' between the text and the cell walls, preventing the data from looking cramped.
Apply these styles to your table: 1. Select the table, th, and td in CSS: `table, th, td { border: 1px solid black; }`. 2. Remove the double borders: `table { border-collapse: collapse; }`. 3. Add space inside cells: `th, td { padding: 15px; }`.
Quick Check
Which CSS property ensures that your table has single, thin lines instead of double-spaced borders?
Answer
border-collapse: collapse;
A common mistake is using tables to move images or text around a page. This is a big 'no-no' in modern web design! Tables should only be used for tabular data—information that belongs in a spreadsheet, like price lists, schedules, or scientific results. For arranging the layout of a website (like putting a sidebar next to an article), we use other tools like Flexbox or Grid. Using tables for layout makes your site hard for screen readers to interpret, which is bad for accessibility.
Imagine comparing three smartphones. You need a table with rows (Header + 3 Phones) and columns (Model, Price, Battery). 1. Use `<thead>` to wrap your header row for better organization. 2. Use `<tbody>` for the data rows. 3. Apply a background color to every other row using the CSS selector `tr:nth-child(even)` to make it easier to read across the columns.
Which tag is used to define a single row in an HTML table?
What is the primary purpose of the 'padding' property in a table cell?
It is considered best practice to use HTML tables to create the overall layout and columns of a website.
Review Tomorrow
In 24 hours, try to sketch the nesting order of <table>, <tr>, and <td> from memory.
Practice Activity
Create a 'Weekly Study Schedule' table with 6 columns (Days/Times) and 5 rows, applying a collapse border and of padding.