HTML Tables
The HTML table allows us to arrange data into rows and columns. HTML tables are commonly used to display tabular data like student mark list, sales reports etc. Usually database values are fetched and displayed as HTML tables for better understanding.
We can create a table using the <table> element. Inside the <table> element, we can use the <tr> elements to create rows, and to create columns inside a row we can use the <td> elements. We can specify header table cells using the <th> element.
| Table Attribute | Description |
|---|---|
| align | Alignment of the table with values: left, center and right. |
| border | Size of the border surrounding table (in pixels). |
| cellpadding | Space between the content of a cell and the border (in pixels). |
| height | It is used to specify the height of the image |
| cellspacing | Space between cells (in pixels). |
| width | Width of the table |
Tags Related to HTML Table
| Tags related to table | Description |
|---|---|
| <table> | Defines the table |
| <thead> | Groups the header content in the table |
| <tr> | Defines a row in the table |
| <th> | Defines a header cell in the table |
| <td> | Defines a cell in the table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in the table for formatting |
| <col> | Specifies column properties |
| <tfoot> | Groups the footer content in a table |
Eg:
<table border="1">
<tr>
<th>Fruit</th>
<th>Colour</th>
<th>Taste</th>
<th>Shape</th>
</tr>
<tr>
<td>Lemon</td>
<td>Yellow</td>
<td>Sour</td>
<td>Round</td>
</tr>
<tr>
<td>Grapes</td>
<td>Red</td>
<td>Sweet_sour</td>
<td>Round</td>
</tr>
</table>
| Fruit | Colour | Taste | Shape |
|---|---|---|---|
| Lemon | Yellow | Sour | Round |
| Grapes | Red | Sweet_sour | Round |