HTML table
HTML table example:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| Adam | Johnson | 67 |
Each table starts with a table tag. Each table row begins with the tr tag. The data for each table starts from the td label.
It doesn't work, just look at the code examples?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h4>一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>两行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
The results are as follows:
a row:
| 100 |
One row and three columns:
| 100 | 200 | 300 |
Two rows and three columns:
| 100 | 200 | 300 |
| 400 | 500 | 600 |
The table is defined by the <table> tag. Each table has several rows (defined by <tr> tags), and each row is divided into several cells (defined by <td> tags). The letter td refers to table data, that is, the contents of data cells. Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, etc.
An example of creating a table is as follows (in fact, the above is also good):
<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 result in the browser is as follows☀️
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
HTML table and border properties
If you do not define border properties, the table will not display borders. Sometimes this is useful, but most of the time, we want to display the border.
Use the border property 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>
HTML table header
The table head is defined using the <th> (table head) tag.
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>
The browser displays the following
| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
More examples (in Github)
Table without borders
This example demonstrates a table without borders.
Heading in the table
This example demonstrates how to display the table header.
Table with caption
This example demonstrates a table with caption
Table cells that span rows or columns
This example demonstrates how to define table cells that span rows or columns.
Labels in tables
This example demonstrates how to display elements within different elements.
