表格ＣＳＳ属性以及实例

最新推荐文章于 2024-02-18 08:08:34 发布

布朗狗熊

最新推荐文章于 2024-02-18 08:08:34 发布

阅读量361

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_40196539/article/details/82694907

HTML 专栏收录该内容

30 篇文章

订阅专栏

表格的css属性

   1）单元格间距（该属性必须给table添加）border-spacing:value;
   2)合并相邻单元格边框 border-collapse:separate（边框分开）/collapse(边框合并)；（写1像素边框表格）
   3）无内容单元格显示、隐藏empty-cells:show/hide;

table-layout:auto/fixed(固定单元格宽度，不随内容增加而增加)

重要属性：1）colspan="value" 合并列 2）rowspan="value" 合并行 3）valign="top/bottom/middle"（垂直对齐方式）水平对齐：align=left/center/right
4)rules="groups/rows/cols/all/none" 添加组分割线
说明：rows:位于行之间的线条
   cols：位于列之间的线条
   all：位于行和列之间的线条
   none：没有线条
   groups:位于行组和列组之间的线条

1）数据行分组
<thead></thead> 表头
tbody，tfoot

2）数据列分组
<colgroup span="value"></colgroup>
<col span="value" />
说明：
1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。
3）可以通过给table添加rules="groups"属性来给分组列添加组分割线。
注意：虽然col和colgroup具有相同的功能，但是，我们只能使用colgroup元素来决定表格内容部分分割线（rules）应该处于的位置，而col没有这个功能。

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta >合并单元格</title>
   
   
   
</head>
<body>
   <table <table border="1" width="400" align="center" cellspacing="0">>
       <tr>
           <td rowspan="2">123</td>
           <td>456</td>
           <td>789</td>
       </tr>
       <tr>
           
           <td>258</td>
           <td>369</td>
       </tr>
       <tr>
           <td>159</td>
           <td colspan="2">357</td>
           
       </tr>
   </table>
</body>
</html>