一、生成基本的表格 html5以css控制表格样式
table元素最好的就是,你不要担心尺寸问题,浏览器会保证让列的宽度足以容纳最宽内容,让行的高 度足以容纳最高的单元格。
table http://www.w3school.com.cn/tags/tag_table.asp
tr http://www.w3school.com.cn/tags/tag_tr.asp
td http://www.w3school.com.cn/tags/tag_td.asp
<table>
<tr>
<td>Apples</td>
<td>Green</td>
<td>Medium</td>
</tr>
<tr>
<td>Oranges</td>
<td>Orange</td>
<td>Large</td>
</tr>
</table>
<table>
<tr>
<td>Apples</td>
<td>Green</td>
<td>Medium</td>
</tr>
<tr>
<td>Oranges</td>
<td>Orange</td>
<td>Large</td>
</tr>
<tr>
<td>Pomegranate</td>
<td>A kind of greeny-red</td>
<td>Varies from medium to large</td>
</tr>
</table>
二、增加表头单元格
th:用来区分数据和对数据的说明
<table>
<tr>
<th>Rank</th><th>Name</th>
<th>Color</th><th>Size</th>
</tr>
<tr>
<th>Favorite:</th>
<td>Apples</td><td>Green</td><td>Medium</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Oranges</td><td>Orange</td><td>Large</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>Pomegranate</td><td>A kind of greeny-red</td>
<td>Varies from medium to large</td>
</tr>
</table>
三、为表格增加结构
以下示例会区分th,和td
这样做的话缺少灵活性,所以thead ,tbody,tfoot要出场了
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
tr > th { text-align:left; background:grey; color:white}
tr > th:only-of-type {text-align:right; background: lightgrey; color:grey}
</style>
</head>
<body>
<table>
<tr>
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
</tr>
<tr>
<th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>
</tr>
<tr>
<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td>
</tr>
<tr>
<th>3rd Favorite:</th><td>Pomegranate</td><td>A kind of greeny-red</td>
<td>Varies from medium to large</td>
</tr>
</table>
</body>
</html>
1、表示表头和表格主题元素
tbody:大多数浏览器在处理表格元素的时候都会自动插入tbody,所以用css选择器的时候可能会出问题, 比如table > tr
thread:如果没有thread的话,所有的tr都会被视为表格主体的一部分
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
thead th { text-align:left; background:grey; color:white}
tbody th { text-align:right; background: lightgrey; color:grey}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>
</tr>
<tr>
<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td>
</tr>
<tr>
<th>3rd Favorite:</th><td>Pomegranate</td>
<td>A kind of greeny-red</td><td>Varies from medium to large</td>
</tr>
</tbody>
</table>
</body>
</html>
tfoot:标记组成表脚的行
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
thead th, tfoot th { text-align:left; background:grey; color:white}
tbody th { text-align:right; background: lightgrey; color:grey}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>
</tr>
<tr>
<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td>
</tr>
<tr>
<th>3rd Favorite:</th><td>Pomegranate</td>
<td>A kind of greeny-red</td><td>Varies from medium to large</td>
</tr>
</tbody>
</table>
</body>
</html>
四、制做不规则的表格
colspan:让单元格跨几列
rowspan:让单元格跨几行
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
thead th, tfoot th { text-align:left; background:grey; color:white}
tbody th { text-align:right; background: lightgrey; color:grey}
[colspan], [rowspan] {font-weight:bold; border: medium solid black}
thead [colspan], tfoot [colspan] {text-align:center; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Rank</th><th>Name</th><th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th><td>Apples</td><td>Green</td>
<td>Medium</td><td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
<td>Large</td><td>450</td>
</tr>
<tr>
<th>3rd Favorite:</th><td>Pomegranate</td>
<td colspan="2" rowspan="2">
Pomegranates and cherries can both come in a range of colors
and sizes.
</td>
<td>203</td>
</tr>
<tr>
<th rowspan="2">Joint 4th:</th>
<td>Cherries</td>
<td rowspan="2">75</td>
</tr>
<tr>
<td>Pineapple</td>
<td>Brown</td>
<td>Very Large</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">© 2011 Adam Freeman Fruit Data Enterprises</th>
</tr>
</tfoot>
</table>
</body>
</html>
colspan是向后覆盖,rowspan是向下覆盖
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td rowspan="3">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>9</td>
</tr>
</table>
五、把表头与单元格关联起来
header:th与td,主要用与屏幕阅读器和其它残障辅助技术用来简化对表格的处理。header属性值是一 个或多个id的值
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
thead th, tfoot th { text-align:left; background:grey; color:white}
tbody th { text-align:right; background: lightgrey; color:grey}
thead [colspan], tfoot [colspan] {text-align:center; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th id="rank">Rank</th>
<th id="name">Name</th>
<th id="color">Color</th>
<th id="sizeAndVotes" colspan="2">Size & Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th id="first" headers="rank">Favorite:</th>
<td headers="name first">Apples</td>
<td headers="color first">Green</td>
<td headers="sizeAndVote first">Medium</td>
<td headers="sizeAndVote first">500</td>
</tr>
<tr>
<th id="second" headers="rank">2nd Favorite:</th>
<td headers="name second">Oranges</td>
<td headers="color second">Orange</td>
<td headers="sizeAndVote second">Large</td>
<td headers="sizeAndVote second">450</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">© 2011 Adam Freeman Fruit Data Enterprises</th>
</tr>
</tfoot>
</table>
</body>
</html>
六、为表格添加标题
caption:定义表格标题,并与其关联起来。只能包含一个caption,位置任意
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
thead th, tfoot th { text-align:left; background:grey; color:white}
tbody th { text-align:right; background: lightgrey; color:grey}
[colspan], [rowspan] {font-weight:bold; border: medium solid black}
thead [colspan], tfoot [colspan] {text-align:center; }
caption {font-weight: bold; font-size: large; margin-bottom:5px}
</style>
</head>
<body>
<table>
<caption>Results of the 2011 Fruit Survey</caption>
<thead>
<tr>
<th>Rank</th><th>Name</th><th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th><td>Apples</td><td>Green</td>
<td>Medium</td><td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
<td>Large</td><td>450</td>
</tr>
<tr>
<th>3rd Favorite:</th><td>Pomegranate</td>
<td colspan="2" rowspan="2">
Pomegranates and cherries can both come in a range of colors
and sizes.
</td>
<td>203</td>
</tr>
<tr>
<th rowspan="2">Joint 4th:</th>
<td>Cherries</td>
<td rowspan="2">75</td>
</tr>
<tr>
<td>Pineapple</td>
<td>Brown</td>
<td>Very Large</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">© 2011 Adam Freeman Fruit Data Enterprises</th>
</tr>
</tfoot>
</table>
</body>
</html>
七、处理列
由于表格是基于tr的,所以对列应用样式的时候有点不方便,对于不规则的表格更难搞,所以要用到 colgroup和col元素
colgroup:表示一组列,局部属性span指定colgroup负责的列数。
应用到colgroup上的样式都低于直接应用到tr,td,th上的样式
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
thead th, tfoot th { text-align:left; background:grey; color:white}
tbody th { text-align:right; background: lightgrey; color:grey}
[colspan], [rowspan] {font-weight:bold; border: medium solid black}
thead [colspan], tfoot [colspan] {text-align:center; }
caption {font-weight: bold; font-size: large; margin-bottom:5px}
#colgroup1 {background-color: red}
#colgroup2 {background-color: green; font-size:small}
</style>
</head>
<body>
<table>
<caption>Results of the 2011 Fruit Survey</caption>
<colgroup id="colgroup1" span="3"/>
<colgroup id="colgroup2" span="2"/>
<thead>
<tr>
<th>Rank</th><th>Name</th><th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th><td>Apples</td><td>Green</td>
<td>Medium</td><td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
<td>Large</td><td>450</td>
</tr>
<tr>
<th>3rd Favorite:</th><td>Pomegranate</td>
<td colspan="2" rowspan="2">
Pomegranates and cherries can both come in a range of colors
and sizes.
</td>
<td>203</td>
</tr>
<tr>
<th rowspan="2">Joint 4th:</th>
<td>Cherries</td>
<td rowspan="2">75</td>
</tr>
<tr>
<td>Pineapple</td>
<td>Brown</td>
<td>Very Large</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">© 2011 Adam Freeman Fruit Data Enterprises</th>
</tr>
</tfoot>
</table>
</body>
</html>
col:对colgroup中个别的列应用样式,如果col不指定span那么他就只代表一列。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
thead th, tfoot th { text-align:left; background:grey; color:white}
tbody th { text-align:right; background: lightgrey; color:grey}
[colspan], [rowspan] {font-weight:bold; border: medium solid black}
thead [colspan], tfoot [colspan] {text-align:center; }
caption {font-weight: bold; font-size: large; margin-bottom:5px}
#colgroup1 {background-color: red}
#col3 {background-color: green; font-size:small}
</style>
</head>
<body>
<table>
<caption>Results of the 2011 Fruit Survey</caption>
<colgroup id="colgroup1">
<col id="col1And2" span="2"/>
<col id="col3"/>
</colgroup>
<colgroup id="colgroup2" span="2"/>
<thead>
<tr>
<th>Rank</th><th>Name</th><th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th><td>Apples</td><td>Green</td>
<td>Medium</td><td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
<td>Large</td><td>450</td>
</tr>
<tr>
<th>3rd Favorite:</th><td>Pomegranate</td>
<td colspan="2" rowspan="2">
Pomegranates and cherries can both come in a range of colors
and sizes.
</td>
<td>203</td>
</tr>
<tr>
<th rowspan="2">Joint 4th:</th>
<td>Cherries</td>
<td rowspan="2">75</td>
</tr>
<tr>
<td>Pineapple</td>
<td>Brown</td>
<td>Very Large</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">© 2011 Adam Freeman Fruit Data Enterprises</th>
</tr>
</tfoot>
</table>
</body>
</html>
八、调置表格边框
border:most of brows meet the 元素会将表格和每个单元格周围绘出边框。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<table border="1">
<caption>Results of the 2011 Fruit Survey</caption>
<colgroup id="colgroup1">
<col id="col1And2" span="2"/>
<col id="col3"/>
</colgroup>
<colgroup id="colgroup2" span="2"/>
<thead>
<tr>
<th>Rank</th><th>Name</th><th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th><td>Apples</td><td>Green</td>
<td>Medium</td><td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
<td>Large</td><td>450</td>
</tr>
<tr>
<th>3rd Favorite:</th><td>Pomegranate</td>
<td colspan="2" rowspan="2">
Pomegranates and cherries can both come in a range of colors
and sizes.
</td>
<td>203</td>
</tr>
<tr>
<th rowspan="2">Joint 4th:</th>
<td>Cherries</td>
<td rowspan="2">75</td>
</tr>
<tr>
<td>Pineapple</td>
<td>Brown</td>
<td>Very Large</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">© 2011 Adam Freeman Fruit Data Enterprises</th>
</tr>
</tfoot>
</table>
</body>
</html>