先放一段代码,展示效果,再详细解释。
<html>
<body>
<table border = "1px" cellspacing = "0px" width = "800px">
<tr>
<th colspan="2">姓名</th>
<td colspan="3" style="background-color:#f5f5f0;">Rhett Butler</td>
</tr>
<tr>
<th colspan="2">性别</th>
<td colspan="3" style="background-color:#f5f5f0;">男</td>
</tr>
<tr>
<th colspan="2">年龄</th>
<td colspan="3" style="background-color:#f5f5f0;">40</td>
</tr>
<tr>
<th width="20%">三个爱好</th>
<td width="20%" contenteditable="true" > </td>
<td width="20%" contenteditable="true"> </td>
<td width="20%" contenteditable="true"> </td>
<td width="20%" contenteditable="true"> </td>
</tr>
<tr>
<th width="20%">三个特长</th>
<td width="20%" contenteditable="true"> </td>
<td width="20%" contenteditable="true"> </td>
<td width="20%" contenteditable="true"> </td>
<td width="20%" contenteditable="true"> </td>
</tr>
<tr>
<th colspan="2">今日心情</th>
<td colspan="3" contenteditable="true"> </td>
</tr>
</table>
</body>
</html>
运行效果如下:
这个运行结果可以自己复制代码到https://www.w3school.com.cn/tiy/t.asp?f=eg_html_td_colspan网页去尝试,直接运行查看效果。
其中包含的知识点有:
(1)一个表格内不同行的列数不同。
采用的办法是colspan属性
colspan="3"
在这段代码中我限制了table整体的宽度为800px,之后限定单元格宽度的行数为第四行和第五行。在第四行和第五行设置了5个单元格,也就是分为5列,每列宽度都为20%。
之后我设置其他行的第一个单元格横跨两列,第二个单元格横跨3列。
就可以实现同一个表格内不同行有不同的列数。
(2)设置表格的边框
初始的表格边框是双层的,不太像我们平时使用的表格形式,因此需要修改边框格式。
border = "1px" cellspacing = "0px"
使用cellspacing属性将单元格之间的空隙设置为0即可。
(3)设置空单元格
这个就是基础知识点了
<td> </td>
用 当作空的占位符即可,不要忘记设置合适的宽度。
(4)设置单元格内容是否可更改
单元格内容默认是不可让用户手动在界面输入更改的。但是在一些情况下,我们需要让用户手动输入部分内容,因此就可以设置单元格属性,设置为内容可更改。
contenteditable="true"
tips:一般不可更改的单元格可以用灰色加以区分。
结语
其他的好像没了,其实都是一些基础的知识,但是业余人员从零开始,还是要费大劲查找。再次整理一下,方便日后使用。后面遇到其他的再整理。