表格的基本结构
调试软件:hBuilder
简单的html表格由table元素以及一个或者多个<tr>、<th>或<td>元素组成。<tr>元素定义表格的行，<th>元素定义表格的头，<td>定义表格单元格。
更复杂的表格可能包括caption、col、colgroup、thead、tfoot、tbody等元素。
<table>标签的属性
属性 | 属性值 | 说明 |
align | left、center、right | 定义表格相对周围元素的对其方式 |
bgcolor | rgb（x，x，x）、#xxxxxx、colorname | 定义表格的背景颜色 |
border | pixels | 定义表格边框的宽度 |
cellspacing | pixels或百分比 | 定义单元格之间的空白 |
cellpadding | pixels或百分比 | 定义单元边沿与其内容之间的空白 |
summary | text | 定义表格的摘要 |
width | pixels | 定义表格的宽度 |
<tr>标签定义hml表格中的行，tr元素包含一个或者多个th或则td元素。
<tr>标签的属性
属性 | 属性值 | 说明 |
align | right、left、center、justify、char | 定义表格行内容对齐方式 |
bgcolor | rgb（x，x，x）、#xxxxxx、colorname | 定义表格行的背景颜色 |
char | character | 定义根据哪个字符来进行文本对齐 |
charoff | number | 定义第一个对齐字符的偏移量 |
valign | top、middle、bottom、baseline | 定义表格行中内容的垂直对齐方式 |
height | pixels、百分比 | 定义表格的行的高度 |
<td>和<th>标签的属性。<td>标签是html表格中的标准单元格，<th>标签是定义表格内表头单元格。th元素内部的元素文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。
<td>和<th>标签的属性
属性 | 属性值 | 说明 |
abbr | text | 定义单元格中内容的缩写版本 |
align | right、left、center、justify、char | 定义单元格内容的水平对齐方式 |
axis | category_name | 对单元格进行分类 |
bgcolor | rgb（x，x，x）、#xxxxxx、colorname | 定义单元格的背景颜色 |
char | character | 定义根据哪个字符来进行文本对齐 |
charoff | number | 定义对齐字符的偏移量 |
colspan | Number | 定义单元格可横跨的列数 |
headers | header_cells'_id | 定义与单元格相关的表头 |
height | pixels | 定义表格单元格的高度 |
nowrap | nowrap | 在 HTML 4.01 中，<td> 的 nowrap 属性 已废弃。 nowrap 属性是一个布尔属性。 nowrap 属性规定表格单元格中的内容不换行。 |
rowspan | number | 定义单元格可横跨的行数 |
scope | col、colgroup、row、rowgroup | 定义单元格内容的垂直排列方式 |
valign | top、middle、bottom、baseline | 定义表格的垂直对齐方式 |
width | pixels、百分比 | 定义表格单元格的宽度 |
创建包含标题的表格：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>包含标题的表格</title>
<style>
</style>
</head>
<body>
<table border="1">
<caption>员工表</caption>
<tr>
<th>姓名</th>
<th>职位</th>
<th>薪资</th>
</tr>
<tr>
<td>李四</td>
<td>员工</td>
<td>6000元</td>
</tr>
<tr>
<td>阿华</td>
<td>秘书</td>
<td>7000元</td>
</tr>
<tr>
<td>张三</td>
<td>经理</td>
<td>15000元</td>
</tr>
</table>
</body>
</html>效果图：
创建含有跨行、列单元格的表格
使用colspan和rowspan属性来创建跨行跨列的表格。
<table>
<caption>三年级前三名学生成绩</caption>
<tr>
<th>班级</th>
<th>姓名</th>
<th>总分数</th>
</tr>
<tr>
<td rowspan="2">三年级二班</td>
<td>李明</td>
<td>290分</td>
</tr>
<tr>
<td>刘华</td>
<td>289分</td>
</tr>
<tr>
<td>三年级一班</td>
<td>马燕</td>
<td>286分</td>
</tr>
</table>效果图：
表格属性
对<table>标签进行其他属性设置，如果背景想要设置成图片用background=" 图片相对地址"。
<table border="1" bordercolor="red" cellspacing="10" cellpadding="10" bgcolor="aqua">效果图：
表格的行属性
html5中tr本身是不能直接用bordercolor属性，要将其放在style里面才能生效。td也是如此。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<table border="1" width="300" cellspacing="10">
<tr height="150" bgcolor="aqua" align="center" valign="top">
<td >第一行属性</td>
<td>第一行属性</td>
</tr>
<tr height="200" align="right" valign="bottom">
<td>第二行属性</td>
<td>第二行属性</td>
</tr>
</table>
</body>
</html>效果图：
单元格属性
对于<td>标签的width和height的设置一定要注意。具体如下：
width：某一个<td>标签的width和他所处的一列中的每个<td>的width都有关，取其最大的width作为这一列中的每个<td>的width。
height：某一个<td>标签的height和他所处的一行中的每个<td>的height都有关，取其最大的heigh作为这一行中的每个<td>的heigh。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<table border="1">
<tr>
<td width="400" height="100" align="left">设置表格的单元属性</td>
<td width="200" valign="top">设置表格的单元属性</td>
</tr>
<tr>
<td height="100" align="center">设置表格的单元属性</td>
<td valign="center">设置表格的单元属性</td>
</tr>
<tr>
<td height="100" align="right">设置表格的单元属性</td>
<td valign="bottom">设置表格的单元属性</td>
</tr>
</table>
</body>
</html>效果图：
设置单元格的背景色，边框颜色
注意：td本身是不能直接用bordercolor属性，要将其放在style里面才能生效。
tr无法直接设置表格边框线的大小，要通过td本身设置，但是可以设置表格行的颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
.mytable td{
border-width: 5px;
}
</style>
</head>
<body>
<table class="mytable" border="1" cellspacing="10" cellpadding="10" bordercolor="red">
<tr style="border-color: blue;"><!--此处会生效 -->
<td style="border-color:red;background-color: blanchedalmond;" bordercolor="">设置表格的单元格属性</td>
<td>设置表格单元格属性</td>
</tr>
<tr style="border-width: 20px;"><!--此处不会生效 -->
<td style="background-color: aqua;border-color: black;">设置表格的单元格属性</td>
<td style=" border-style: dotted ; background-color:red;border-color: black; ">设置表格的单元格属性</td>
</tr>
</table>
</body>
</html>效果图：
设置单元格的亮边框和暗边框
bordercolorlight属性用于定义亮边框，bordercolordark属性用于定义暗边框。但是两者并不是字面意思，一般是针对表格的（包括表格中的行和单元格），表格的边框默认都是4个边框。其中亮边框属性设置的一般是左边框、上边框，暗边框设置的是下边框、右边框，必须在IE浏览器上浏览。
<tr> <td bordercolorlight="red" bordercolordark="gold">亮和暗</td> </tr>
练习：设计表格标题的样式
border-radius 边框半径。
它是一个设置所有四个属性border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius和border-top-right-radius的简写。如果值在斜杠之前和之后给出，那么斜杠之前的值设置水平半径，斜杠之后的值设置垂直半径。如果没有斜杠，那么值设置两个半径相等。每个半径的四个值按左上、右上、右下、左下的顺序给出。如果省略左下，则与右上相同。如果省略右下角，则与左上角相同。如果省略top-right，则与top-left相同。
下面是两个典型使用border-radius属性的例子。因为在border-radius属性之后有两个值，第一个值是定义元素的左上角和右下角的圆的半径，第二个值是定义元素的左上角和左下角的圆的半径。
border-radius ：30px 30px ;
效果图：
border-radius:30px/50px;
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>练习题</title>
<style>
table{
background: aqua;
}
caption{
background: rosybrown;
border:solid 1px red;
color: blue;
font-size: 30px;
border-radius:30px 30px 0 0 ;/*设置标题的圆角边框*/
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<caption>员工表</caption>
<tr>
<th>姓名</th>
<th>职位</th>
<th>薪资</th>
</tr>
<tr>
<td >刘伟</td>
<td >秘书</td>
<td >10000元</td>
</tr>
<tr>
<td >阿华</td>
<td >职员</td>
<td >8000元</td>
</tr>
</table>
</body>
</html>效果图：
