Author: MDBootstrap
HTML Table Example
| # | Lorem | Ipsum | Dolor |
|---|---|---|---|
| 1 | Cell 1 | Cell 2 | Cell 3 |
| 2 | Cell 4 | Cell 5 | Cell 6 |
| 3 | Cell 7 | Cell 8 | Cell 9 |
Defining an HTML Table
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is
defined with the <th> tag. By default, table headings are
bold and centered. A table data/cell is defined with the
<td> tag.
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Live preview
| Firstname | Lastname | Age |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
Note: The <td> elements are the data
containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
I suppose you noticed that the table from the first example looks different than from the second example.
That's because in the first table, apart from simple HTML, we also use MDBootstrap class.
MDBootstrap is an additional tool, which can significantly improve your HTML. You will learn about it in the next tutorials.
From this lesson, the most important for you is to remember what is the basic HTML construction of the tables.
Previous lesson Next lesson
Spread the word:
