前端之表格

表格
- 间距和布局
- - table-layout
  - border-collapse
  - padding
  - 字符间距
  - link添加字体样式
  - 自定义字体
- 图形和颜色
- - 斑马条纹图案
  - 样式化标题
牛刀小试
- 裸表
- 表格布局
- 添加表头样式
- 表格内容
- 斑马条纹
- 标题

表格

预备知识：前端之HTML 表格

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

间距和布局

table-layout

设置表格的布局算法：

<style>table-layout: fixed;
</style>

table-layout: fixed，您可以根据列标题的宽度来规定列的宽度。所以
表头thead内的表头单元格th的宽度要指定设置。

整个表的列宽度与列标题的宽度是一样的，这是一种很好的设定表列尺寸的方式。

border-collapse

设置表格的边框是否被合并为一个单一的边框

padding

和元素上设置了一些padding，是表格数据看起了不拥挤。

字符间距

letter-spacing属性，有助于提高可读性。

link添加字体样式

<style><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
</style>

自定义字体

font-family：指定字体；可以指定多个，优先级是从左到右，那个有效用那个。

图形和颜色

<style>
thead,
tfoot {background: url(../images/leopardskin.jpg);color: white;text-shadow: 1px 1px 1px black;
}thead th,
tfoot th,
tfoot td {background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));border: 3px solid purple;
}
</style>

斑马条纹图案

<style>
tbody tr:nth-child(odd) {background-color: #ff33cc;
}tbody tr:nth-child(even) {background-color: #e495e4;
}tbody tr {background-image: url(noise.png);
}table {background-color: #ff33cc;
}
</style>

样式化标题

<style>
caption {font-family: 'Rock Salt', cursive;padding: 20px;font-style: italic;caption-side: bottom;color: #666;text-align: right;letter-spacing: 1px;
}
</style>

font-style和font-family的区别：

caption-side：

网页实例

牛刀小试

网上找的一张表如下：

裸表

<!DOCTYPE html>
<html lang="zh-cmn-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格——牛刀小试</title><link rel="stylesheet" href="./styles/table-test.css">
</head><body>
</body>
<table><caption>大道影视制作有限公司职员一览表</caption><thead><tr><th scope="col">姓名</th><th scope="col">性别</th><th scope="col">出生年月</th><th scope="col">学历</th><th scope="col">职务</th><th scope="col">基本工资</th><th scope="col">浮动工资</th><th scope="col">生活补贴</th><th scope="col">总收入</th></tr></thead><tbody><tr><th scope="row">钱亮</th><td>男</td><td>1975/3/5</td><td>大学</td><td>工程师</td><td>1300</td><td>1800</td><td>170</td><td>3270</td></tr><tr><th scope="row">周岳</th><td>男</td><td>1969/6/30</td><td>研究生</td><td>总工程师</td><td>1500</td><td>2000</td><td>200</td><td>3700</td></tr><tr><th scope="row">郑涛</th><td>男</td><td>1973/2/1</td><td>研究生</td><td>高级工程师</td><td>1200</td><td>2000</td><td>150</td><td>3350</td></tr><tr><th scope="row">刘彦波</th><td>女</td><td>1971/2/15</td><td>大学</td><td>供销经理</td><td>1200</td><td>1500</td><td>200</td><td>2900</td></tr><tr><th scope="row">韩清</th><td>女</td><td>1970/5/21</td><td>大学</td><td>经济师</td><td>1300</td><td>2100</td><td>160</td><td>3560</td></tr><tr><th scope="row">张丽</th><td>女</td><td>1974/9/2</td><td>大学</td><td>工程师</td><td>1250</td><td>1800</td><td>190</td><td>3240</td></tr><tr><th scope="row">赵亚美</th><td>女</td><td>1972/2/21</td><td>大专</td><td>秘书</td><td>1000</td><td>1500</td><td>120</td><td>2620</td></tr><tr><th scope="row">林丽娟</th><td>女</td><td>1974/10/1</td><td>大专</td><td>经济师</td><td>1100</td><td>1200</td><td>200</td><td>2500</td></tr></tbody>
</table></html>

效果：

表格布局

<style>
table {/* 布局方式 */table-layout: fixed;/* 去掉表格间隙 */border-collapse: collapse;/* 表宽：响应式 */width: 100%;/* 表格外边框 */border: 3px solid black;
}
</style>

效果：

添加表头样式

宽度

<style>
/* 表头样式
table-layout:fixed；布局
表格内容与表头是同等宽度的
*/
thead>th:nth-child(1) {width: 10%;
}thead>th:nth-child(2) {width: 10%;
}thead>th:nth-child(3) {width: 10%;
}thead>th:nth-child(4) {width: 10%;
}thead>th:nth-child(5) {width: 20%;
}thead>th:nth-child(6) {width: 10%;
}thead>th:nth-child(7) {width: 10%;
}thead>th:nth-child(8) {width: 10%;
}thead>th:nth-child(9) {width: 10%;
}</style>

效果：

表格内容

<style>
/* 表格内容
居中 边框 字间距*/th,
td {text-align: center;border: 1px solid black;
}th {letter-spacing: 2px;
}td {letter-spacing: 1px;
}
</style>

斑马条纹

<style>thead tr {color: white;background-color: black;
}tbody tr:nth-child(2n) {background-color: yellow;
}tbody tr:nth-child(2n+1) {background-color: greenyellow;
}
</style>

标题

<style>
table caption {caption-side: top;font-size: 1.2em;text-align: center;text-shadow: 1px 1px 1px black;margin: 5px;
}
</style>

改：

<style>
th,
td {text-align: center;padding: .2em;border: 1px solid black;
}
</style>

半屏：

全屏：

手机屏幕：

文字自动换行：
word-break: break-all;

<style>
th,
td {text-align: center;padding: .2em;border: 1px solid black;word-break: break-all;
}
</style>