The basic structure of the table:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!--
table 为表格
tr/th 行
td 列（每一个单元格）
-->
<tr> </tr>: Row of the table<td> </td>: Each row of the table is divided into several cells,<td></td>defined by tags. (Td refers to table data, table data)
<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>
display effect:
<th> </th>The label is the header of the table, which is understood as the text bolded and horizontally centered .<td>
<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>
Properties of the table:
- width="The width of the table"
- height="the height of the table"
- border="The border of the table"
- bordercolor="Border color"
- cellspacing="The spacing between cells"
- cellpadding="The distance between the cell and the content"
- Merge cell attributes: (td)
merge columns: colspan="the number of columns of the cell to be merged"
merge rows: rowspan="the number of rows of the cell to be merged" - 8. align="Horizontal alignment of the table" Values: left, right, center, valign="Vertical alignment"
top\bottom\middle
Related exercises:
<table border="1px" width="360px" height="100px" cellspacing="0px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td colspan="2">3</td>
</tr>
</table>
<table border="1px" width="360px" height="100px" cellspacing="0px">
<tr>
<td rowspan="2">a</td><!-- 合并行 -->
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
</table>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格练习</title>
</head>
<body>
<table border="1px" cellspacing="0">
<col width="100px" > <!-- 第一列宽度 -->
<col width="100px" > <!-- 第二列宽度 -->
<col width="100px" > <!-- 第三列宽度 -->
<col width="100px" > <!-- 第四列宽度 -->
<col width="100px" > <!-- 第五列宽度 -->
<col width="100px" > <!-- 第六列宽度 -->
<col width="200px" > <!-- 第七列宽度 -->
<tr height="50px" align="center">
<th colspan="7"> 个人简历</th>
</tr>
<tr height="50px" align="center">
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4">照片</td><!-- 行合并 占四行位置 -->
</tr>
<tr height="50px" align="center">
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td>
<!-- <td></td> 做行合并时删除-->
</tr>
<tr height="50px" align="center">
<td>电话</td>
<td></td>
<td >政治面貌</td>
<td colspan="3"></td>
<!-- <td></td> 做行合并时删除-->
</tr>
<tr height="50px" align="center">
<td>毕业院校</td>
<td colspan="5"></td>
<!-- <td></td> 做行合并时删除-->
</tr>
<tr height="50px" align="center">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
<table border="px" bordercolor="#ffa500" width="1700px" height="975px" cellspacing="0px"
style="text-align: center;font-size:30px;border-collapse: collapse;">
<col width="202px">
<tr>
<!-- 1 -->
<th colspan="5" >逆战班学员介绍</th>
</tr>
<tr>
<!-- 2 -->
<td>您的大名</td>
<td width="404px"></td>
<td width="200px">贵庚</td>
<td width="404px"></td>
<td rowspan="5"></td>
</tr>
<tr>
<!-- 3 -->
<td>是否毕业</td>
<td width="404px"></td>
<td width="200px">专业是啥</td>
<td width="404px"></td>
</tr>
<tr>
<!-- 4 -->
<td>大学名称</td>
<td colspan="3"></td>
</tr>
<tr>
<!-- 5 -->
<td>从事过的工作</td>
<td colspan="3"></td>
</tr>
<tr>
<!-- 6 -->
<td>H5基础情况</td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<!-- 7 -->
<td>自我性格描述</td>
<td colspan="4"></td>
</tr>
<tr>
<!-- 8 -->
<td rowspan="2">简述1.目标规划 2.对H5的疑问 3.建议</td>
<td rowspan="2" colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<!-- 9 -->
<td colspan="2"></td>
</tr>
</table>
- border-collapse property (css property): The
border-collapse property sets whether the borders of the table are merged into a single border or displayed separately as in standard HTML.
separate：默认值，边框会分开，不会忽略 border-spacing 和 empty-cells 属性。
collapse：边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit:规定应该从父元素继承 border-collapse 属性的值。
Set the merge border properties for the table:
- table
{
border-collapse:collapse;
}