css中的表格---lesson9

最新推荐文章于 2023-09-08 14:56:27 发布

心之所善兮

最新推荐文章于 2023-09-08 14:56:27 发布

阅读量314

点赞数

分类专栏：我的Web前端之路

本文链接：https://blog.csdn.net/baidu_26994091/article/details/73317647

版权

我的Web前端之路专栏收录该内容

12 篇文章 0 订阅

订阅专栏

css中的表格table涉及到的属性控制：

border-collapse

caption-side

empty-cells

border-spacing

table-layout

border

截图：

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#customers {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	width: 100%;
	border-collapse: separate; /*separate边框不会并默认，collapse边框合并 */
	caption-side: bottom;  /* 表格标题caption的位置，位于表格上面top还是下面bottom */
	empty-cells: hide;   /*当为空的元素,是否隐藏该单元格*/
	border-spacing: 10px 30px;  /*边框的间距，水平、垂直距离，只有在table的border-collapse设置为separate才有效*/
	table-layout: automatic;   /*automatic默认,列宽度由单元格内容设定;fixed,列宽由表格宽度和列宽度设定*/
}

#customers td, #customers th, #customers {
	font-size: 1em;
	border: 1px solid #98bf21;  /*边框的宽度*/
	padding: 3px 7px 2px 7px;
}

#customers th {
	font-size: 1.1em;
	text-align: left;
	padding-top: 5px;
	padding-bottom: 4px;
	background-color: #A7C942;
	color: #ffffff;
}

#customers tr.alt td {
	color: #000000;
	background-color: #EAF2D3;
}

#customers caption {  /*表格的标题*/
	font-weight: bold;
	font-style: italic;
	font-size: 2em;
}
</style>
</head>

<body>
	<table id="customers">
		<caption>this is a caption</caption>
		<tr>
			<th>Company</th>
			<th>Contact</th>
			<th>Country</th>
		</tr>

		<tr height="40px;">
			<td style="text-align: center;">Apple</td>
			<td style="vertical-align: top;">Steven Jobs</td>
			<td style="padding-left: 30px;">USA</td>
		</tr>

		<tr class="alt">
			<td>Baidusssssssssssssssssssssssssssssssssssssssaassssss</td>
			<td>Li YanHong</td>
			<td>China</td>
		</tr>

		<tr>
			<td>Google</td>
			<td>Larry Page</td>
			<td>USA</td>
		</tr>

		<tr class="alt">
			<td>Lenovo</td>
			<td>Liu Chuanzhi</td>
			<td>China</td>
		</tr>

		<tr>
			<td>Microsoft</td>
			<td>Bill Gates</td>
			<td>USA</td>
		</tr>

		<tr class="alt">
			<td width="20%">Nokia</td>
			<td width="60%">Stephen Elop</td>
			<td width="20%">Finland</td>
		</tr>

		<tr>
			<td>English</td>
			<td></td>
			<td>Italian</td>
		</tr>

	</table>
</body>
</html>

心之所善兮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中的表格---lesson9

css中的表格table涉及到的属性控制：border-collapsecaption-sideempty-cellsborder-spacingtable-layoutborder截图：代码：Insert title here#customers { font-family: "Trebuchet MS", Arial, Helvetica,
复制链接

扫一扫

专栏目录