<css 六>table

最新推荐文章于 2023-02-16 20:02:12 发布

Thoby

最新推荐文章于 2023-02-16 20:02:12 发布

阅读量271

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/q869429064/article/details/51052624

版权

css 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

border:(表格边框)

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		table,th,td{
			border:1px solid gray;
		}	
	</style>
</head>
<body>
	<table>
		<tr>
			<th>表头</th>
			<td>格子</td>
			<td>格子</td>
		</tr>
		<tr>
			<td>A</td>
			<td>B</td>
			<td>C</td>
		</tr>
	</table>
</body>
</html>

边框折叠：（border-collapse）

border-collapse:collapse;

宽度-width、高度-height设定：

width:75%;
height:55px;

表格中的文本对其方式：(text-align)

td{
	text-align:top/bottom/left/right/center;
    }

垂直对其方式：(vertical-align)

td{
	vertical-align:top/bottom/left/right/center;
}

内边框设定:(padding)

td{
	padding:5px;
}

表格颜色:

th{
      border:3px solid green;
      background-color:gray;
}
td{
	background-color:red;		
}

单元格边框：

table{
	border-spacing:20px;或
        border-spacing:20px  50px;
}

表格标题位置:

table{
	caption-side:bottom/top;
	}
<body>
	<table>
	            <caption>表格标题</caption>
	</table>
</body>

是否显示表格中的空单元格:

table{
	border-collapse:separate;
	empty-cells:hide/show;
  }

表格布局算法：

table{
  table-layout:fixed;
		列宽由表格宽度和列宽度设定。
  table-layout:table-layout:automatic;
		默认。列宽度由单元格内容设定。
  }

Thoby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
<css 六>table

border:(表格边框) table,th,td{ border:1px solid gray; } 表头格子格子 A B C 边框折叠：（border-collapse）border-collapse:collapse;宽度-width、高度-height设定：width:
复制链接

扫一扫

专栏目录