HTML tables

HTML table

---

An instance of an HTML table

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
John	Doe	80
Adam	Johnson	67

---

Form
This example shows how to create a table in an HTML document.

(More instances can be found at the bottom of this page.) ）

HTML tables

---

The table <table> label. E ach table has several rows (defined by the <tr> and each row is divided into cells <td> by the label). T he letter td refers to table data, which is the contents of a data cell. Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and so on.

The basic structure of HTML tables:

<table>…</table> of the table

<th>…</th> the table (bold text)

<tr>…</tr> the table

<td>…</td> the table

Table instance

---

The browser appears as follows:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML table and border properties

---

If border properties are not defined, the table does not display borders. Sometimes this is useful, but most of the time, we want to display borders.

Use the border border to display a table with a border:

HTML table header cell

---

The table header cells of <th> the hashtags.

Table header cell properties are primarily public attributes such align dir width height

Most browsers display the header as bold, centered text:

The browser appears as follows:

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Table Title slt;caption

---

We <table> the hashtags . <caption> ... </ caption> displayed at the top of the table.

Note: This label has been deprecated in a newer version of HTML/XHTML

HTML table height and width

---

In <table> the width width height properties to set the table width and height. You can specify the width or height of the table by pixels or as a percentage of the available screen area.

HTML table background

---

You can use one of the following methods to set the background of an HTML table

• bgcolor - You can set the background color for the entire table or just one cell.
• background Property - You can set a background image for the entire table or just one cell.
• bordercolor - You can set the border color.

Note: T he bgcolor background bordercolor HTML5. D o not use these properties.

Using background property requires an image URL address:

HTML table space

---

There are two properties for adjusting the space of cells in an HTML table:

• cellspacing - Defines the space between table cells
• cellpadding - represents the distance between the cell border and the contents of the cell

HTML merges cells

---

• If you want to combine two or more columns into one column, the colspan
• If you want to merge two or more rows, the rowspan used.

The effect is as follows:

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

HTML table header, body, footer

---

Tables can be divided into three parts - header, body, and footer, like the header, body, and footer of a page in a word document. Each page remains the same, and the body is the main content holder of the table.

The three labels for the head, body, and footer are:

• <thead> a separate header.
• <tbody> of the table.
• <tfoot> a separate table footer.

Tables can contain <tbody> to indicate different pages.

It is worth noting, however, that the labels should appear before <tbody> labels: <thead> <tfoot>

The nesting of HTML tables

---

You can use a table in another table. You can use almost all of the labels within the <table>

---

A table without a border
This example shows a table without a border.

Heading in a table
This example shows how to display a table header.

Table with title
This example shows a table with a title (caption).

Table cells that span rows or columns
This example shows how to define table cells that span rows or columns.

The label in the table
This example shows how to display elements within different elements.

Cell margins (Cell padding )
This example shows how cell padding can be used to create a blank space between a cell's contents and its border.

Cell spacing ( Cell spacing )
This example shows how cell space can be used to increase the distance between cells.

HTML table labels

---

Label	describe
<table>	Definition form
<th>	Define the header of the table
<tr>	Define the form of form
<td>	Define Table Unit
<caption>	Definition table title
<colgroup>	Define groups of tables
<col>	Define properties for the table column
<thead>	Define the header of the table
<tbody>	Define the subject of the table
<tfoot>	Define the footer of the table