<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于表格的一些练习</title> 注释：2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后（在table标签里包括），这个表格就要等表格内容全部下载完才会显示
</head>
<body>
<p>一个普通基本的表格</p>
<table border="5" bgcolor="#ffe4c4" background="sun.html" cellpadding="10" cellspacing="10" width="100%" height="200px">
<h2>以上属性依次为 边框宽度 背景色 背景图案 字符距边框距离 边框间距 表格宽度 表格像素大小</h2>
<caption>我的标题</caption> 注释：这是表格标题元素
<tr background="blue">
<th align="left">姓名</th>
<th align="right">电话</th> 注释：表格格式是行元素标签<tr>包括列元素标签<td>其中一种特殊的表头元素标签<th>作为基本的元素标签优先级与列元素标签相同
<th align="">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<p>一个带有页眉页脚的表格</p>
<table border="1"> <!--页眉（thead）页脚(tfoot)和（tbody）必须一起使用-->
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
表格标签中的定义表格列组属性的标签<colgroup> 与其类似的定义一个或多个列的属性标签<col>
两个 colgroup 元素为表格中的三列规定了不同的对齐方式和样式（注意第一个 colgroup 元素横跨两列）：
<table width="100%" border="1">
<colgroup span="2" align="left"></colgroup>
<colgroup align="right" style="color:#0000FF;"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
所有主流浏览器都支持 <colgroup> 标签。
Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性。
定义和用法
<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。
如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
<colgroup> 标签只能在 table 元素中使用。
HTML 与 XHTML 之间的差异
NONE
提示和注释：
提示：请为 <colgroup> 标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。
注释：col 元素是仅包含属性的空元素。如需创建列，您就必须在 tr 元素内部规定 td 元素。
参见：<col> 标签。
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| align |
|
定义在列组合中内容的水平对齐方式。 |
| char | character | 规定根据哪个字符来对齐列组中的内容。 |
| charoff | number | 规定第一个对齐字符的偏移量。 |
| span | number | 规定列组应该横跨的列数。 |
| valign |
|
定义在列组合中内容的垂直对齐方式。 |
| width |
|
规定列组合的宽度。 |
列表是可以进行嵌套的 就是将普通列表元素替换为列表标签 即可实现嵌套
列表标签
<ol start="数字"> 注释：start属性用来描述有序列表项的排列情况 默认从1开始
<di>具体内容</di>
<di>具体内容</di>
<di>具体内容</di>
</ol>
无序列表 注释：无序列表项之前以实心小黑点代替 若嵌套则实心空心交替出现
<ul>
<di>具体内容</di>
<di>具体内容</di>
<di>具体内容</di>
</ul>
定义列表
<dl>
<dt>定义列表项</dt>
<dd>定义列表项的描述</dd>
<dt>定义列表项</dt>
<dd>定义列表项的描述</dd>
</dl>