A table is an essential component in HTML for displaying data in a structured format with rows and columns. In HTML, tables are created using the <table>, <tr>, and <td> tags.
The <table> tag represents the main table container, which contains all the rows and columns. Rows are defined using the <tr>(table row) tag, while cells within the rows are defined using the <td>(table data) tag. Additionally, you can use the <th>(table header) tag to define header cells for the table.
You can use attributes like colspan and rowspan to merge cells in the table or span cells across multiple rows and columns. Furthermore, you can apply CSS properties to customize the appearance and layout of the table.
Table(<table>)
- The <table> element is used to create a table in HTML.
- Data is placed in rows(<tr>) and columns(<td> or <th>).
- Each data cell is placed within <td>(data cell) or <th>(header cell) elements.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Column Header(<th>)
- The <th> element is used to create column headers in a table.
- Typically placed in the first row of the table.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Data Rows(<tr>):
- The <tr> element is used to create data rows in a table.
- Data cells(<td>) or header cells(<th>) are placed within these <tr> elements.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Column Spanning(colspan)
The colspan attribute is used to determine the number of columns that a data cell or header cell will span in the table.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Row Spanning(rowspan)
The rowspan attribute is used to determine the number of rows that a data cell or header cell will span in the table.
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Merging Cells(colspan and rowspan)
You can combine both colspan and rowspan attributes to merge cells in a table.
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border property
- The border property specifies the thickness of the table border.
- The value of border is a non-negative integer.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding property
- ,The cellpadding property specifies the distance between the cell content and the border of the cell in the table.
- The value of cellpadding is a non-negative integer
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing property
- The cellspacing property specifies the spacing between cells in the table.
- The value of cellspacing is a non-negative integer.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
These attributes and elements allow you to create and customize tables in HTML according to your needs. You can use them to display data in a clear and organized manner on your website.