css表格
程序员文章站
2022-07-09 18:37:46
今天写某个平台的前端数据展示 主要使用表格展示 正好复习总结一下css的表格 首先说说thead、tbody、tfoot 无论前后顺序如何改变， 内的元素总是在表的最上面， 总在表的最下面 可能会有人分不清 tr th td tr: table row = 表格中的一行 th: table head ......
今天写某个平台的前端数据展示 主要使用表格展示 正好复习总结一下css的表格
首先说说thead、tbody、tfoot
<thead></thead> <tbody></tbody> <tfoot> </tfoot> 无论前后顺序如何改变， <thead> 内的元素总是在表的最上面， <tfoot> 总在表的最下面
可能会有人分不清 tr th td
tr: table row => 表格中的一行
th: table head => 表格头部
td: table data => 表数据
然后在看例子就很容易理解啦
表结构
<table>
<caption>Book List</caption>
//caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
<thead>
<tr>
<th></th> //table head 定义表格内的表头单元格。此th元素内部的文本通常会呈现为粗体
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><td> //table data cell
<td><td>
<td><td>
<td><td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<table>
dome帮助理解
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table</title>
<style type="text/css">
table {
background-color: #FFF;
border: none;
color: #565;
font: 12px arial;
}
table caption {
font-size: 24px;
border-bottom: 2px solid #B3DE94;
border-top: 2px solid #B3DE94;
}
table,
td,
th {
margin: 0;
padding: 0;
vertical-align: middle;
text-align: left;
}
tbody td,
tbody th {
background-color: #DFC;
border-bottom: 2px solid #B3DE94;
border-top: 3px solid #FFFFFF;
padding: 9px;
}
tfoot td,
tfoot th {
font-weight: bold;
padding: 4px 8px 6px 9px;
text-align: center;
}
thead th {
font-size: 14px;
font-weight: bold;
line-height: 19px;
padding: 0 8px 2px;
text-align: center;
}
tbody tr.odd th,
tbody tr.odd td {
/*odd就是偶数行*/
background-color: #CEA;
border-bottom: 2px solid #67BD2A;
}
tbody tr:hover td,
tbody tr:hover th {
/*tr也有hover样式*/
background-color: #8b7;
color: #fff;
}
</style>
</head>
<body>
<table summary="book list">
<caption>table</caption>
<thead>
<tr>
<th>Title</th>
<th>ID</th>
<th>Country</th>
<th>Price</th>
<th>Download</th>
</tr>
</thead>
<tbody>
<tr>
<th>Tom</th>
<td>1213456</td>
<td>Germany</td>
<td>$3.12</td>
<td>Download</td>
</tr>
<tr class="odd">
<th>Chance</th>
<td>1213457</td>
<td>Germany</td>
<td>$123.34</td>
<td>Download</td>
</tr>
<tr>
<th>John</th>
<td>1213458</td>
<td>Germany</td>
<td>$34.37</td>
<td>Download</td>
</tr>
<tr class="odd">
<th>oKathleen</th>
<td>1213459</td>
<td>Germany</td>
<td>$23.67</td>
<td>Download</td>
</tr>
</tbody>
<tfoot>
<tr class="odd">
<td>tfoot</td>
<td>tfoot</td>
<td>tfoot</td>
<td>tfoot</td>
<td>tfoot</td>
</tr>
</tfoot>
</table>
</body>
</html>
</body>
</html> 下一篇： eslint 入门项目搭建过程