HTML tables


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.


Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.