You can create a table using HTML.
Instance
-
Form
-
This example shows how to create a table in an HTML document.
-
Table border
-
This example shows the various types of table borders.
(You can find more instances at the bottom of this page.) )
Form
The table is defined by the <table> tag. Each table has several rows (defined by the <tr> tag) and each row is split into several cells (defined by the <td> tag). The letter TD refers to the table data, which is the contents of the data cell. Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and so on.
<table border= "1" ><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>
The browser appears as follows:
Row 1, Cell 1 |
Row 1, Cell 2 |
Row 2, Cell 1 |
Row 2, Cell 2 |
Table and Border properties
If you do not define a border property, the table will not display a border. Sometimes this is useful, but most of the time we want to show the border.
Use the Border property to display a table with a border:
border="1">
<tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr></table>
Table header
The table header is defined using the <th> tag.
Most browsers display the header in bold text centered:
<table border= "1" ><tr> <th>Heading</th><th>Another Heading</th>
</tr><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>
The browser appears as follows:
Heading |
another Heading |
Row 1, Cell 1 |
Row 1, Cell 2 |
Row 2, Cell 1 |
Row 2, Cell 2 |
Empty cells in a table
In some browsers, table cells with no content are not displayed well. If a cell is empty (no content), the browser may not be able to display the border of the cell.
<table border= "1" ><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>< Tr> <td></td>
<td>row 2, cell 2</td></tr></table>
The browser may display this:
Note: The border of this empty cell is not displayed. To avoid this situation, add a space placeholder to the empty cell to display the border.
<table border= "1" ><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>< Tr> <td> </td>
<td>row 2, cell 2</td></tr></table>
The following is displayed in the browser:
Row 1, Cell 1 |
Row 1, Cell 2 |
|
Row 2, Cell 2 |
More examples
-
Table with no borders
-
This example shows a table with no borders.
-
Table headers in table (Heading)
-
This example shows how to display a table header.
-
Empty cells
-
This example shows how to use to work with cells that have no content.
-
A table with headings
-
This example shows a table with a caption (caption)
-
Table cells across rows or across columns
-
This example shows how to define table cells that span rows or across columns.
-
Labels in the table
-
This example shows how to display an element within a different element.
-
Cell padding (cell padding)
-
This example shows how to use cell padding to create white space between the contents of a cell and its border.
-
Cell spacing (cell spacing)
-
This example demonstrates how to use cell spacing to increase the distance between cells.
-
Add a background color or background image to a table
-
This example shows how to add a background to a table.
-
Add a background color or background image to a table cell
-
This example shows how to add a background to one or more table cells.
-
Arrange content in a table cell
-
This example demonstrates how to use the Align property to arrange the contents of a cell to create an aesthetically pleasing table.
-
Frame Property
-
This example demonstrates how to use the Frame property to control the bounding rectangle around a table.
Table Labels
Table |
Description |
<table> |
Defining tables |
<caption> |
Defines the table title. |
<th> |
Defines the table header for the table. |
<tr> |
Defines the row for the table. |
<td> |
Defines a table cell. |
<thead> |
Defines the header of the table. |
<tbody> |
Defines the body of the table. |
<tfoot> |
Defines the footer of the table. |
<col> |
Defines the properties used for table columns. |
<colgroup> |
Defines the group of table columns. |
HTML table.