Before learning tables, let's take a look at a simple HTML code:
<body>
<table border="1" >
<!-- 表格的标题 -->
<caption>学生信息表</caption>
<tr>
<th >姓名</th>
<th >学号</th>
<th >性别</th>
<th >年龄</th>
</tr>
<tr>
<th>张三</th>
<td>191111</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<th>李四</th>
<td>192222</td>
<td>男</td>
<td>17</td>
</tr>
<tr>
<th>王五</th>
<td>193333</td>
<td>男</td>
<td>19</td>
</tr>
</table>
</body>The running effect is as follows:
This is a table with four rows and four columns,
In the above code, we used five tags <table>, <caption>, <tr>, <td> and <th>:
- <table> represents a table, and all contents of the table need to be written between <table> and </table>.
- <caption> is the title of the table, and the content is written in caption
- <tr> is the abbreviation of table row, which means the row of the table. The number of <tr> tags in the table indicates how many rows of data there are.
- <td> is the abbreviation of table datacell, which means the cell of the table, which is the label that actually stores the table data. Cell data can be in various forms such as text, pictures, lists, paragraphs, forms, horizontal lines, tables, etc.
- <th> is the abbreviation of table heading, which means the header of the table. <th> is actually a variant of the <td> cell, which is essentially a cell. <th> is generally placed on the first row and acts as the heading of each column. Most browsers will display the header as bold, centered text.
1. The borders of the table are merged:
Careful readers may have noticed that most common table styles on web pages are single-layer borders, and the table shown in the above example is a double-layer border. In order to avoid this situation, we can use the border-collapse property in CSS to set the border of the table. border-collapse means "border collapse". When the attribute value is collapse, the double border of the table can be changed into a single border.
<body>
<table border="1" style="border-collapse: collapse;">
<!-- 表格的标题 -->
<caption>学生信息表</caption>
<tr>
<th >姓名</th>
<th >学号</th>
<th >性别</th>
<th >年龄</th>
</tr>
<tr>
<th>张三</th>
<td>191111</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<th>李四</th>
<td>192222</td>
<td>男</td>
<td>17</td>
</tr>
<tr>
<th>王五</th>
<td>193333</td>
<td>男</td>
<td>19</td>
</tr>
</table>
</body>The effect works as follows:
3. Cell merging
Similar to Excel, HTML also supports cell merging, including cross-row merging and cross-column merging.
- rowspan: Indicates cross-row merge. In the HTML code, we are allowed to use the rowspan attribute to indicate the number of rows that the cell should span.
- colspan: Indicates merging across columns. Likewise, HTML allows us to use the colspan attribute to indicate the number of columns a cell spans.
The specific format is as follows:
<td rowspan="n">Cell content</td>
<td colspan="n">Cell content</td>
n is an integer representing the number of rows or columns to merge.
It should be noted here that both rowspan and colspan are attributes of the <td> tag.
In the following example, we merge the cells in rows 3 and 4 of column 1 of the table (merge across rows), and merge the cells in columns 2 and 3 of row 4 (merge across columns). The specific code is as follows:
<body>
<table border="1" style="border-collapse: collapse;">
<!-- 表格的标题 -->
<caption>学生信息表</caption>
<tr>
<th >姓名</th>
<th >学号</th>
<th >性别</th>
<th >年龄</th>
</tr>
<tr>
<th>张三</th>
<td>191111</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<th rowspan="2">李四</th>
<td>192222</td>
<td>男</td>
<td>17</td>
</tr>
<tr>
<!-- <th>王五</th> -->
<td colspan="2">193333</td>
<!-- <td>男</td> -->
<td>19</td>
</tr>
</table>
</body>The running effect is as follows:
By running the results, you can find:
- The rowspan attribute means to merge cells downward, and the colspan attribute means to merge cells to the right.
- Every time you merge n cells, you need to write less n-1 <td> tags.