Tables
Tables in HTML are used to display data in a structured, tabular format using rows and columns. Each piece of data is placed inside a cell, which is the intersection of a row and a column.
Common Table Tag
Example: Basic table example
Output:

Table Rows ( <tr> )
The <tr> tag is used to define a row in the table. It wraps around cells defined with <td> or <th>.
Example:
Output:

Table Cells ( <td> )
Each <td> tag represents a data cell within a table row. It is used for actual content in non-header cells.
Example:
Output:

Table Headers ( <th> )
The <th> tag is used to define header cells. These are bold and centered by default, and usually appear in the first row.
Example:
Output:

Common Table Tag
Tag | Description |
---|---|
<table> | Defines a table |
<tr> | Defines a row in a table |
<th> | Defines a header cell (bold and centered by default) |
<td> | Defines a standard cell |
<caption> | Adds a title/caption to the table |
<colgroup> | Groups columns for formatting |
<col> | Specifies column properties inside <colgroup> |
<thead> | Groups header content |
<tbody> | Groups the main body content |
<tfoot> | Groups footer content |
Example: Basic table example
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Table</title> </head> <body> <table border="1"> <tr> <th>Student Name</th> <th>Marks</th> </tr> <tr> <td>Prince</td> <td>56</td> </tr> <tr> <td>Rahul</td> <td>59</td> </tr> </table> </body> </html>
Output:

Table Rows ( <tr> )
The <tr> tag is used to define a row in the table. It wraps around cells defined with <td> or <th>.
Example:
<!DOCTYPE html> <html> <head> <title>Table Rows</title> </head> <body> <table border="1"> <tr> <td>Row1, Cell1</td> <td>Row1, Cell2</td> <td>Row1, Cell3</td> </tr> <tr> <td>Row2, Cell1</td> <td>Row2, Cell2</td> <td>Row2, Cell3</td> </tr> </table> </body> </html>
Output:

Table Cells ( <td> )
Each <td> tag represents a data cell within a table row. It is used for actual content in non-header cells.
Example:
<!DOCTYPE html> <html> <head> <title>Table Cells</title> </head> <body> <table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> </body> </html>
Output:

Table Headers ( <th> )
The <th> tag is used to define header cells. These are bold and centered by default, and usually appear in the first row.
Example:
<!DOCTYPE html> <html> <head> <title>Table Headers</title> </head> <body> <table border="1"> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> <tr> </table> </body> </html>
Output:

Key Point
- Always use <thead> and <tbody> for better structure and accessibility.
- The <th> tag gives emphasis to headers with default styling.
- Use CSS for borders and spacing for a cleaner look.
- Use <caption> to describe the purpose of your table.