HTML tables

HTML Table Example

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

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.