玩转HTML表格:分割与边框设定
先放一段代码,展示效果,再详细解释。
<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:一般不可更改的单元格可以用灰色加以区分。
结语
其他的好像没了,其实都是一些基础的知识,但是业余人员从零开始,还是要费大劲查找。再次整理一下,方便日后使用。后面遇到其他的再整理。
上一篇: 如何在table中实现边框合并?
下一篇: Html中的表格,边框基础知识
推荐阅读
-
玩转HTML表格边框设定
-
玩转HTML表格:分割与边框设定
-
快速入门 HTML 表格:理解边框与隔行颜色的使用
-
玩转CSS盒子边框:设置表格边框样式与合并相邻元素
-
设定 HTML 表格单元格的尺寸:宽度与高度
-
玩转 HTML 表格与表单:轻松上手指南
-
玩转 HTML 表格边框属性
-
美化你的网页表格:玩转Html Table边框样式
-
玩转HTML:表格与表单的巧妙应用
-
在React和Vue中,我们是如何玩转router的? - 使用HTML5 History API,React Router利用pushState和replaceState方法在不刷新页面的情况下管理导航历史。它像这样工作: 1. 当URL发生变化时,React Router悄悄地“监听”浏览器地址栏的改动,主要通过popstate事件来察觉url更改。 2. 随着URL的变化,Router会对照预先设定好的JavaScript路由配置对象,依据一套规则找出与当前URL匹配的路径。 3. 一旦找到合适的路线,React Router就会如魔法般地渲染相应的组件到网页上,从而实现了页面内容的实时更新。让我们来看一个React Router实际运用的例子。