表格标签的基本使用（理解）
表格标签 其实在过去表格标签用的非常非常的多，绝大多数的网站都是使用表格标签来制作的，也就是说表格标签是一个时代的代表。 例如：2002.sina.com.cn 2004.sina.com.cn 1.什么是表格标签？ 表格标签作用：用来给一堆数据添加表格语义。 其实表格是一种数据的展现各式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式。 2.表格标签格式： <table border="0"> <tr> <td>需要显示的内容</td> </tr> </table> table标签代表整个表格。 tr标签就是表格中的一行。 td标签就是一行中的一列。 3.注意点 1.表格标签有一个边框属性，这个属性决定了边框的宽度。默认情况下这个属性的值是0，所以看不到边框。 2.表格标签和列表标签一样，它是一个组合标签。所以table/tr/td要么一起出现，要么都不出现，不会单个使用。
例子：要求写一个表格，这个表格中有2行3例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!-- 要求写一个表格，这个表格中有2行3例 --> <table border="1"> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.4</td> <td>2.5</td> <td>2.6</td> </tr> </table> </body> </html>
表格标签的属性(了解)
1.宽度和高度的属性。(可以给table标签和td标签使用。)
1.1表格的宽度和高度默认是按照内容的尺寸来调整的，也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度。
1.2如果给td标签设置width、height属性，会修改当前单元的宽度和高度，不会影响整个表格的宽度和高度。
2.水平对齐和垂直对齐的属性。(水平对齐可以给table标签和tr标签和td标签使用。垂直对齐只能给tr标签和td标签使用。)
水平对齐：align
2.1给table标签设置align属性，可以控制表格在水平方向的对齐方式。
2.2给tr标签设置align属性，可以控制当前行中所有单元格内容的水平方向的对齐方式。
2.3给td标签设置align属性，可以控制当前单元格中内容在说方向的对齐方式。
注意点：如果td中设置了align属性，tr中也设置了align属性，那么单元格中的内容会按照td中设置的来对齐。
2.4给tr标签设置valign属性，可以控制当前行中所有单元格中的内容，在垂直方向的对齐方式。（center默认、top、bottom）
2.5给td标签设置valign属性，可以控制当前单元格中的内容，在垂直方向的对齐方式。（center默认、top、bottom）
注意点：如果td中设置了valign属性，tr中也设置了valign属性，那么单元格中的内容会按照td中设置的来对齐。
3.外边距和内边距的属性。(只能给table标签使用。)
3.1外边距cellspacing就是单元格和单元格之间的距离，我们称之为外边距。单元格和单元格之间的距离。
默认情况下外边距的距离是2px.
3.2内边距cellpadding就是单元格的边框和文字之间的间隙，我们称之为内边距。
默认情况下内边距是1.
注意：以上讲解的内容仅仅作为了解，以后在企业开发中所有控制样式都是通过CSS.
1.宽度和高度的属性。(table、td)
table设置宽高（整个表格的宽高）
1.1表格的宽度和高度默认是按照内容的尺寸来调整的，也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度。
td设置宽高（不影响整张表格的宽高）
1.2如果给td标签设置width、height属性，会修改当前单元的宽度和高度，不会影响整个表格的宽度和高度。
2.水平对齐和垂直对齐的属性。(水平:table、tr 、td；垂直：tr、td)
水平对齐align (table、tr、td)
2.1给table标签设置align属性，可以控制表格在水平方向的对齐方式。
2.2给tr标签设置align属性，可以控制当前行中所有单元格内容的水平方向的对齐方式。默认left、right、center。
2.3给td标签设置align属性，可以控制当前单元格中内容在说方向的对齐方式。默认left、right、center
注意点：如果td中设置了align属性，tr中也设置了align属性，那么单元格中的内容会按照td中设置的来对齐。
垂直对齐（tr/td）默认垂直居中center
2.4给tr标签设置valign属性，可以控制当前行中所有单元格中的内容，在垂直方向的对齐方式。（center默认、top、bottom）
2.5给td标签设置valign属性，可以控制当前单元格中的内容，在垂直方向的对齐方式。（center默认、top、bottom）
注意点：如果td中设置了valign属性，tr中也设置了valign属性，那么单元格中的内容会按照td中设置的来对齐。
3.外边距和内边距的属性。(table)
外边距 cellspacing
3.1外边距就是单元格和单元格之间的距离，我们称之为外边距。单元格和单元格之间的距离。
默认情况下外边距的距离是2px.
内边距 cellpadding
3.2内边距就是单元格的边框和文字之间的间隙，我们称之为内边距。
默认情况下内边距是1.
细线表格(理解)
在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的，其实它是将2条线合并为1条线，所以看上去很不舒服。 细线表格的制作方式： 1.给table标签设置bgcolor. 2.给tr标签设置bgcolor. 3.给table标签设置cellspacing="1px". 注意点： table标签和tr标签以及td标签都支持bgcolor属性。 但是以上内容仅仅作为了解，因为样式以后都是通过css来控制的。 <table bgcolor="black" cellspacing="1px"> <tr bgcolor="white"> <td bgcolor="red">1.1</td> <td>1.2</td> </tr> <tr bgcolor="white"> <td>2.1</td> <td>2.2</td> </tr> </table>
案例：
方式1：去掉外边距
方式2：背景色和外边距
表格中的其他标签（理解）
1.表格标题
在表格标题中提供了一个标签专门用来设置表格的标题。
这个标签叫做caption.只要将标题写在caption标签中，那么标题就会自动相对于表格的宽度居中。
2.caption标签的注意点：
2.1caption一定要写在table标签中，否则无效。
2.2caption一定要紧跟在table标签后面。
3.标题单元格标签
在表格标签中提供了一个标签专门用来存储每一列的标题。
这个标题叫做th标签，只要将当前列的标题存储在这个标签中就会自动居中+加粗文字。
到此为止我们就发现，其实表格中有两种单元格，一种是td,一种是th,td是专门用来存储数据的，th是专门用来存储当前列的标题的。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格中的其他标签</title> </head> <body> <!-- 1.表格标题 在表格标题中提供了一个标签专门用来设置表格的标题。 这个标签叫做caption.只要将标题写在caption标签中，那么标题就会自动相对于表格的宽度居中。 2.caption标签的注意点： 2.1caption一定要写在table标签中，否则无效。 2.2caption一定要紧跟在table标签后面。 3.标题单元格标签 在表格标签中提供了一个标签专门用来存储每一列的标题。 这个标题叫做th标签，只要将当前列的标题存储在这个标签中就会自动居中+加粗文字。 到此为止我们就发现，其实表格中有两种单元格，一种是td,一种是th,td是专门用来存储数据的，th是专门用来存储当前列的标题的。 --> <table bgcolor="black" cellspacing="1px" width="600"> <caption> <h2>今日小说</h2> </caption> <tr bgcolor="#a9a9a9"> <th>排名</th> <th>关键字</th> <th>趋势</td> <th>今日搜索</th> <th>最近7日</th> <th>相关链接</th> </tr> <tr bgcolor="white" align="center"> <td>1</td> <td align="left">暴走大事件</td> <td> <img src="a.jpg" width="10px"> </td> <td>623557</td> <td>4088311</td> <td> <a href="JavaScript:">贴吧</a> <a href="JavaScript:">图片</a> <a href="JavaScript:">百科</a> </td> </tr> <tr bgcolor="white" align="center"> <td>1</td> <td align="left">暴走大事件</td> <td> <img src="a.jpg" width="10px"> </td> <td>623557</td> <td>4088311</td> <td> <a href="JavaScript:">贴吧</a> <a href="JavaScript:">图片</a> <a href="JavaScript:">百科</a> </td> </tr> <tr bgcolor="white" align="center"> <td>1</td> <td align="left">暴走大事件</td> <td> <img src="a.jpg" width="10px"> </td> <td>623557</td> <td>4088311</td> <td> <a href="JavaScript:">贴吧</a> <a href="JavaScript:">图片</a> <a href="JavaScript:">百科</a> </td> </tr> </table> </body> </html>
表格的结构（了解）
1.由于表格中存储的数据比较复杂，为了方便管理和阅读以及提升语义，我们可以对表格中存储的数据进行分类。 表格中存储的数据可以分为4类。 1.表格的标题 caption。 2.表格的表头信息 thead > tr > th。 3.表格的主体信息 tbody。 4.表格的页尾信息 tfoot。 2.表格的完整结构。 <table> <caption>表格的标题</caption> <thead> <tr> <th>每一列的标题</th> </tr> </thead> <tbody> <tr> <td>数据</td> </tr> </tbody> <tfoot> <tr> <td>数据</td> </tr> </tfoot> </table> 注意点： 1.如果我们没有编写tbody,系统会自动给我们加上tbody. 2.如果指定了thead和tfoot，那么在修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着表格的高度变化而变化。
注意点：1.如果我们没有编写tbody,系统会自动给我们加上tbody.
注意点：2.如果指定了thead和tfoot，那么在修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着表格的高度变化而变化。
单元格合并（理解）
1.水平方向上的单元格合并。 可以给td标签添加一个colspan属性，来指定把某一个单元格当做多个单元格来看待。 例如：<td colspan="2">1.1</td> 含义：把当前单元格当做两个单元格来看待(水平方向)。 注意点： 1.由于把某一个单元格当做了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格才能正常显示。 2.一定要记住单元格合并永远都是向后或者向下合并，而不能向前或者向上合并。 2.垂直方向上的合并。 可以给td标签添加一个rowspan属性，来指定把某一个单元格当做多个单元格来看待(垂直方向)。 例如：<td rowspan="2">1.1</td>含义：把当前单元格当做两个单元格来看待。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单元格合并</title> </head> <body> <!-- 1.水平方向上的单元格合并。 2.垂直方向上的合并。 --> <table bgcolor="black" width="500px" height="300px"> <tr bgcolor="white"> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr bgcolor="white"> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr bgcolor="white"> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table> </body> </html>
1.水平方向上的单元格合并。
可以给td标签添加一个colspan属性，来指定把某一个单元格当做多个单元格来看待(水平方向)。
注意点：由于把某一个单元格当做了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格才能正常显示。
练习
2.垂直方向上的合并。
可以给td标签添加一个rowspan属性，来指定把某一个单元格当做多个单元格来看待(垂直方向)。
练习
代码：
<table bgcolor="black" width="500px" height="300px"> <tr bgcolor="white"> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr bgcolor="white"> <td>2.1</td> <td colspan="2" rowspan="2">2.2</td> <!-- <td>2.3</td> --> </tr> <tr bgcolor="white"> <td>3.1</td> <!-- <td colspan="2">3.2</td> --> <!-- <td>3.3</td> --> </tr> </table>