在HTML5中，要创建表格的列与列之间的分隔线，通常使用CSS来定义表格、行、单元格的边框样式

Bol5261

已于 2024-02-25 13:18:48 修改

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

于 2020-07-03 15:49:34 首次发布

本文链接：https://blog.csdn.net/blog_programb/article/details/107107361

HTML5(HyperText Markup) 同时被 2 个专栏收录

305 篇文章

订阅专栏

CSS(Cascading Style Sheets)

231 篇文章

订阅专栏

在HTML5中，要创建表格的列与列之间的分隔线，通常使用CSS来定义表格、行、单元格的边框样式。border-collapse等）结合使用，以实现所需的视觉效果。

以下是一个包含列与列之间分隔线的HTML5表格示例：

html

HTML5 表格列分隔线

标题1	标题2	标题3
数据1	数据2	数据3
数据4	数据5	数据6

在这个示例中，CSS样式border-collapse: collapse;用于确保表格的边框合并为一个连续的边框，而不是每个单元格都有独立的边框。border: 1px solid black;则定义了单元格边框的宽度、样式和颜色。th和td元素都应用了这些样式，从而在每个单元格周围创建了分隔线。同时，通过为th元素添加背景色，可以进一步区分表头和数据行。 - column-rule 属性 - column-rule属性是一个速记属性设置所有column-rule-*属性。column-rule属性设置列之间的宽度，样式和颜色。

<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>列与列之间的分隔线</title>
<style type="text/css">
body {
	border:1px solid #f90;
	padding:10px;
	-webkit-column-count:3;     /* 指定列的数目 */
	-moz-column-count:3;        /* 指定列的数目 */
	column-count:3;             /* 指定列的数目 */
	-webkit-column-rule:1px solid #666;     /* 设置分割线 */
	-moz-column-rule:1px solid #666;        /* 设置分割线 */
	column-rule:1px solid #666;             /* 设置分割线 */
}
h1 {font-size:24px;padding:5px 10px;background-color:#CCC;}
h2 {font-size:14px;text-align:center;}
p {text-indent:2em;	font-size:12px;line-height:20px;}
</style>
</head>
<body>
<h1>背影</h1>
<h2>朱自清</h2>
<p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。</p>
<p>那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。我从北京到徐州打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼籍的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说："事已如此，不必难过，好在天无绝人之路！"</p>
<p>回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半因为丧事，一半因为父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p>
<p>到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。我两三回劝他不必去；他只说："不要紧，他们去不好！"</p>
<p>我们过了江，进了车站。我买票，他忙着照看行李。行李太多了，得向脚夫行些小费才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分，总觉他说话不大漂亮，非自己插嘴不可，但他终于讲定了价钱；就送我上车。他给我拣定了靠车门的一张椅子；我将他给我做的紫毛大衣铺好座位。他嘱我路上小心，夜里要警醒些，不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂；他们只认得钱，托他们只是白托！而且我这样大年纪的人，难道还不能料理自己么？唉，我现在想想，那时真是太聪明了！</p>
</body>
</html>