样式化表格

最新推荐文章于 2022-01-09 13:39:22 发布

faye_yang18

最新推荐文章于 2022-01-09 13:39:22 发布

阅读量165

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/faye_yang18/article/details/80601607

版权

小贴士：

使您的表格标记尽可能简单，并且保持灵活性，例如使用百分比，这样设计就更有响应性。
使用 table-layout: fixed 创建更可预测的表布局，可以通过在标题width中设置width来轻松设置列的宽度。
使用 border-collapse: collapse 使表元素边框合并，生成一个更整洁、更易于控制的外观。
使用<thead>, <tbody>和<tfoot> 将表格分割成逻辑块，并提供额外的应用CSS的地方，因此如果需要的话，可以更容易地将样式层叠在一起。
使用斑马线来让其他行更容易阅读。
使用 text-align直线对齐您的<th>和<td>文本，使内容更整洁、更易于跟随。

下面贴出今天刚写出来的（参考msn）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<table>
			<caption>A summary of the UK's most famous punk bands</caption>
			<thead>
				<tr>
					<th scope="col">Band</th>
					<th scope="col">Year formed </th>
					<th scope="col">No.of Albums</th>
					<th scope="col">Most famous song</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">Buzzcocks</th>
					<td>1976</td>
					<td>9</td>
					<td>Ever fallen in love(with someone yuo shouldn't've)>/td></td>
				</tr>
				<tr>
					<th scope="row">The Clash</th>
					<td>1976</td>
					<td>6</td>
					<td>London Calling</td>
				</tr>
				<tr>
					<th scope="row">The Damned</th>
					<td>1976</td>
					<td>610</td>
					<td>Smash it up</td>
				</tr>
				<tr>
					<th scope="row">Sex Pistols</th>
					<td>1975</td>
					<td>1</td>
					<td>Anarchy in the UK</td>
				</tr>
				<tr>
					<th scope="row">Sham 69</th>
					<td>1976</td>
					<td>13</td>
					<td>If the kids are united</td>
				</tr>
				<tr>
					<th scope="row">Siouxsie and the Banshees</th>
					<td>1976</td>
					<td>11</td>
					<td>Hong Kong Garden</td>
				</tr>
				<tr>
					<th scope="row">Stiff Little Fingers</th>
					<td>1977</td>
					<td>10</td>
					<td>Suspect Device</td>
				</tr>
				<tr>
					<th scope="row">The Stranglers</th>
					<td>1974</td>
					<td>17</td>
					<td>No More Heros</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<th scope="row" colspan="2">Total albums</th>
					<td colspan="2">77</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

/* spacing */

table {
  table-layout: fixed;/*它使表的行为在默认情况下更可预测.通过 table-layout: fixed，您可以根据标题的宽度来对列进行大小排序，然后根据适当的内容处理它们的内容*/
  width: 100%;/*我们将它与一个100%的width耦合在一起，这意味着该表将填充它放入的任何容器，并且响应得很好（虽然它仍然需要更多的工作来让它在窄屏宽度上看起来很好）。*/
  border-collapse: collapse;/*消除边框两条间隔其中的一条*/
  border: 3px solid plum;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th, td {
  padding: 20px;
}

html {
  font-family: 'helvetica neue', helvetica, arial, sans-serif;
}

thead th, tfoot th {
  font-family: 'luna', cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}
thead,tfoot {
	background-image: url(img/timg.jpg);
	color: purple;
	text-shadow: 1px 1px 1px black;
}
thead th, tfoot th, tfoot td {
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3));
  border: 3px solid plum;
}
tbody tr:nth-child(odd) {
	background-color: pink;
}
/*tbody tr:nth-child(even) {
	background-color: mistyrose;
}*/
caption {
  font-family: forte, cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;/*放置在底端*/
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}

展示效果

faye_yang18

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
样式化表格

小贴士：使您的表格标记尽可能简单，并且保持灵活性，例如使用百分比，这样设计就更有响应性。使用 table-layout: fixed 创建更可预测的表布局，可以通过在标题width中设置width来轻松设置列的宽度。使用 border-collapse: collapse 使表元素边框合并，生成一个更整洁、更易于控制的外观。使用&lt;thead&gt;, &lt;tbody&gt;和&lt;tf...
复制链接

扫一扫