Pewangga Blog Untuk Berbagi Ilmu Dan Informasi
HTML Table Example:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| Adam | Johnson | 67 |
HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag. (tr stands for table row)
A row is divided into data cells with the <td> tag. (td stands for table data)
A row can also be divided into headings with the <th> tag. (th stands for table heading)
The <td> elements are the data containers in the table.
The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.
The width of a table can be defined using CSS.
Example
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
An HTML Table with a Border Attribute
If you do not specify a border style, the table will be displayed without borders.
A border can be adding using the border attribute:
Example
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
 |
The border attribute is on its way out of the HTML standard. It is better to use CSS. |
|---|
Remember to define borders for both the table, and the table cells.
An HTML Table with Collapsed Borders
If you want the table border, and the table cells borders to collapse into one border, add border-collapse to your CSS.
An HTML Table with Cell Padding
If you do not specify padding, the table cells will be displayed without padding.
To display a table with padding, use CSS to “style” the padding:
HTML Table Headings
Headings are defined with the <th> tag.
All major browsers display headings as bold and centered.
Example
<tr>
<th>First</th>
<th>Last</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
To left-justify your headings use CSS:
An HTML Table with Cell Spacing
To display a table with cell spacing, use CSS to “style” the spacing:
More Examples
Tables without borders
How to create tables without borders.
Table headers
How to create table headers.
Table with a caption
How to add a caption to a table.
Table cells that span more than one row/column
How to define table cells that span more than one row or one column.
Tags inside a table
How to display elements inside other elements.
Cell padding
How to use padding to create more white space between the cell content and its borders.
Cell spacing
How to use spacing to increase the distance between the cells.
HTML Table Tags
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |