HTML Tables
HTML tables are used to display data in a tabular form.
The following figure illustrates the components of a table in HTML.
- Table contains Rows, and Columns.
- Each column can have a heading (Header Cell) which are grouped in Table Head.
- Each Row contains multiples Cells.
The following table provides the details of the tags used for different parts of the table mentioned above.
Table Component | HTML Tag |
---|---|
Table | <table> |
Head | <thead> |
Header Cell | <th> |
Body | <tbody> |
Row | <tr> |
Cell | <td> |
Example
In the following example, we create a table with head and body. Head contains column names, and the body contains rows, which intern contains cells.
index.html
<!DOCTYPE html> <html lang="en"> <head> <style> table, th, td { border: 1px solid; } </style> </head> <body> <table> <thead> <th>Name</th> <th>Quantity</th> </thead> <tbody> <tr> <td>Apple</td> <td>25</td> </tr> <tr> <td>Banana</td> <td>18</td> </tr> <tr> <td>Cherry</td> <td>36</td> </tr> </tbody> </table> </body> </html>
HTML Table Tutorials
The following list of tutorials cover different use-cases specific to HTML tables.
- HTML Table Borders
- HTML Table Caption
- HTML Table Column Group
- HTML Table Column Span
- HTML Table Header for Multiple Columns
- HTML Table Row Span
- HTML Table Column Width
- HTML Table Cell Spacing
Conclusion
In this HTML Tutorial, we learned about HTML Tables, and different scenarios with HTML Tables, with examples.