10.表格
2022-09-05 本文已影响0人
一直流浪
一、CSS表格
CSS 表格属性可以帮助您极大地改善表格的外观。
二、属性
2.1 border-collapse 属性
border-collapse 属性设置是否将表格边框折叠为单一边框：
值：
- separate——默认值。边框会被分开。
- collapse——边框会合并为一个单一的边框。
- inherit——从父元素继承 border-collapse 属性的值。
<!DOCTYPE html>
<!--
作者：2584966199@qq.com
时间：2020-03-17
描述：
border-collapse 属性设置表格的边框是否被合并为一个单一的边框
-->
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
table {
border-collapse: collapse;
}
table,
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Annual income </th>
</tr>
<tr>
<td>张三</td>
<td>50w</td>
</tr>
<tr>
<td>李四</td>
<td>60w</td>
</tr>
</table>
</body>
</html>
2.2 border-spacing 属性
border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
table.one {
border-collapse: separate;
border-spacing: 10px
}
table.two {
border-collapse: separate;
border-spacing: 10px 50px
}
</style>
</head>
<body>
<table class="one" border="1">
<tr>
<td>张三</td>
<td>50w</td>
</tr>
<tr>
<td>李四</td>
<td>60w</td>
</tr>
</table>
<br />
<table class="two" border="1">
<tr>
<td>张三</td>
<td>50w</td>
</tr>
<tr>
<td>李四</td>
<td>60w</td>
</tr>
</table>
</body>
</html>
2.3 caption-side 属性
caption-side 属性设置表格标题的位置。
可能的值：
- top默认值。把表格标题定位在表格之上。
- bottom把表格标题定位在表格之下。
- left 把表格标题定位在表格左边（谷歌浏览器支持）。
- right 把表格标题定位在表格右边（谷歌浏览器支持）。
- inherit规定应该从父元素继承 caption-side 属性的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.test1{
caption-side: top;
}
.test2{
caption-side:left;
}
.test3{
caption-side: right;
}
.test4{
caption-side: bottom;
}
</style>
</head>
<body>
<h1>caption上边</h1>
<table border="1" class="test1">
<caption>caption在上面</caption>
<tbody>
<tr>
<td>这是一个单元格</td>
<td>这是一个单元格</td>
</tr>
<tr>
<td>这是一个单元格</td>
<td>这是一个单元格</td>
</tr>
</tbody>
</table>
<h1>caption左边</h1>
<table border="1" class="test2">
<caption>caption在左面</caption>
<tbody>
<tr>
<td>这是一个单元格</td>
<td>这是一个单元格</td>
</tr>
<tr>
<td>这是一个单元格</td>
<td>这是一个单元格</td>
</tr>
</tbody>
</table>
<h1>caption右边</h1>
<table border="1" class="test3">
<caption>caption在右面</caption>
<tbody>
<tr>
<td>这是一个单元格</td>
<td>这是一个单元格</td>
</tr>
<tr>
<td>这是一个单元格</td>
<td>这是一个单元格</td>
</tr>
</tbody>
</table>
<h1>caption下边</h1>
<table border="1" class="test4">
<caption>caption在下面</caption>
<tbody>
<tr>
<td>这是一个单元格</td>
<td>这是一个单元格</td>
</tr>
<tr>
<td>这是一个单元格</td>
<td>这是一个单元格</td>
</tr>
</tbody>
</table>
</body>
</html>
2.4 empty-cells 属性
empty-cells 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。
可能的值：
- hide不在空单元格周围绘制边框。
- show在空单元格周围绘制边框。默认。
- inherit规定应该从父元素继承 empty-cells 属性的值。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>empty-cells</title>
<style>
body {
background-color: deepskyblue;
}
h1 {
font-size: 16px;
font-family: Arial;
}
.test {
empty-cells: show;
}
.test2 {
empty-cells: hide;
}
</style>
</head>
<body>
<h1>show:</h1>
<table border="1" class="test">
<tbody>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>1</td>
<td>Joy</td>
<td>26</td>
</tr>
<tr>
<td>2</td>
<td>Kate</td>
<td></td>
</tr>
</tbody>
</table>
<h1>hide:</h1>
<table border="1" class="test2">
<tbody>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>1</td>
<td>Joy</td>
<td>26</td>
</tr>
<tr>
<td>2</td>
<td>Kate</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
2.5 table-layout 属性
tableLayout 属性用来显示表格单元格、行、列的算法规则。
- automatic默认。列宽度由单元格内容设定。
- fixed列宽由表格宽度和列宽度设定。
- inherit规定应该从父元素继承 table-layout 属性的值。
.固定表格布局：
固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。
在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。
通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。
自动表格布局：
在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。
此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。
<!DOCTYPE html>
<!--
作者：2584966199@qq.com
时间：2020-03-17
描述：table-layout 属性
automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
-->
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>table-layout</title>
<style>
body {
background-color: deepskyblue;
}
h1 {
font-size: 16px;
font-family: Arial;
}
.auto {
table-layout: auto;
width: 400px;
}
.fixed {
table-layout: fixed;
width: 400px;
}
</style>
</head>
<body>
<h1>auto: 自动表格布局</h1>
<table border="1" class="auto">
<tbody>
<tr>
<td>自动表格布局，宽度将基于单元格的内容自动拉伸</td>
<td>自动表格布局</td>
<td>自动表格布局</td>
</tr>
<tr>
<td>自动表格布局</td>
<td>自动表格布局</td>
<td>自动表格布局</td>
</tr>
</tbody>
</table>
<h1>fixed: 固定表格布局</h1>
<table border="1" class="fixed">
<tbody>
<tr>
<td>固定表格布局</td>
<td>固定表格布局</td>
<td>固定表格布局</td>
</tr>
<tr>
<td>固定表格布局</td>
<td>固定表格布局</td>
<td>固定表格布局</td>
</tr>
</tbody>
</table>
</body>
</html>
例：一个漂亮的表格
<html>
<head>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
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;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Baidu</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>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>
</table>
</body>
</html>
