HTML tables


May 02, 2021 11:07 HTML


Table of contents


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



HTML tables

Online instance


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


<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>


Try it out . . .

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:

<table border="1">

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>


Try it out . . .


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:

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</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>


Try it out . . .

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

<table border = "1">

<caption>这是标题</caption>

<tr>

<td>row 1, column 1</td><td>row 1, columnn 2</td>

</tr>

<tr>

<td>row 2, column 1</td><td>row 2, columnn 2</td>

</tr>

</table>


Try it out . . .


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.

<table border = "1" width = "400" height = "150">

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>


Try it out . . .


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.

<body>

<table border = "1" bordercolor = "green" bgcolor = "yellow">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

</table>

</body>


Try it out . . .

Using background property requires an image URL address:

<table border = "1" bordercolor = "green" background = "/images/test.png">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

</table>


Try it out . . .


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

<table border = "1" cellpadding = "5" cellspacing = "5">

<tr>

<th>Name</th>

<th>Salary</th>

</tr>

<tr>

<td>其琛</td>

<td>5000</td>

</tr>

<tr>

<td>曼迪</td>

<td>7000</td>

</tr>

</table>


Try it out . . .

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.

<table border = "1">

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

<td rowspan = "2">Row 1 Cell 1</td>

<td>Row 1 Cell 2</td>

<td>Row 1 Cell 3</td>

</tr>

<tr>

<td>Row 2 Cell 2</td>

<td>Row 2 Cell 3</td>

</tr>

<tr>

<td colspan = "3">Row 3 Cell 1</td>

</tr>

</table>


Try it out . . .


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>

<table border = "1" width = "100%">

<thead>

<tr>

<td colspan = "4">This is the head of the table</td>

</tr>

</thead>

<tfoot>

<tr>

<td colspan = "4">This is the foot of the table</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

<td>Cell 3</td>

<td>Cell 4</td>

</tr>

</tbody>

</table>


Try it out . . .

The nesting of HTML tables


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

<table border = "1" width = "100%">

<tr>

<td>

<table border = "1" width = "100%">

<tr>

<th>Name</th>

<th>Salary</th>

</tr>

<tr>

<td>其琛</td>

<td>5000</td>

</tr>

<tr>

<td>曼迪</td>

<td>7000</td>

</tr>

</table>

</td>

</tr>

</table>


Try it out . . .



HTML tables

More instances


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


标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚