HTML Table
What is html table ?
HTMl Table is defined with the <table> tag and then table row <tr> and cells <td>(table data) or <th> (table head). Table tag is the parent of table. Table can have rows, data, captions, colgroup, cols, etc.
Tables are only used for structured data. Number of columns should remain same for each row. Although we can merge cells in row or columns.
Example
<table>
<tr>
<td>row 1 - cell 1</td>
<td>row 1 - cell 2</td>
</tr>
<tr>
<td>row 2 - cell 1</td>
<td>row 2 - cell 2</td>
</tr>
</table>
Output
| row 1 - cell 1 | row 1 - cell 2 |
| row 2 - cell 1 | row 2 - cell 2 |
Table Tags
Here is a list of tags used in table. Table is started with (table) tag. Inside table tag, we have rows (tr) and columns (td). Here s a list of tags in table.
Table Tags |
|
|---|---|
| Tag Name | Description |
| <table> | Defines table element |
| <tr> | Defines table row |
| <td> | Defines table cell or table data |
| <th> | Defines table header cell |
| <caption> | Defines table caption |
| <colgroup> | Defines group of columns in a table, for formatting |
| <col> | Defines attribute values for one or more columns in table |
| <thead> | Groups the heading rows in table |
| <tbody> | Groups the body data rows in table |
| <tfoot> | Groups footer data rows in table |
Table Attributes
Here is a list of attributes of table tag. All presentational attributes are removed in HTML5. For styling like border, width, background, etc, best practice is to use css.
Table Attributes |
|
|---|---|
| Attribute | Use |
| width | width of table or table cell |
| heigth | heigth of table or table cell |
| align | align odf a table or cells |
| valign | vertically align text in table cell |
| bgcolor | background color of table |
| cellpadding | gap inside table cells |
| cellspacing | gap between table cells |
| rowspan | used to group columns in next row. |
| colspan | used to group columns in same row. |