HTML Base 2 (table)

HTML table

• HTML Images
• HTML List

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>&nbsp;</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 &nbsp; 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 demonstrates how to use cellpadding to create white space between the contents of a cell and its border.

Cell spacing (cellspacing)

This example demonstrates how to use cellspacing 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 Base 2 (table)