表格
表格也是用一组标签来描述:
table,thead,tbody,tr,td/th
所有的数据必须填充到td/th中
th是td的plus+,自带了一个加租和居中样式
<table class="">
<!-- 表格标题 -->
<caption>商品信息表</caption>
<!-- 表头 -->
<thead>
<!-- 没添加一组表格数据,必须先添加一行 -->
<tr>
<th>ID</th>
<th>品名</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
</tr>
</thead>
<!-- 表格的主体,一个表格可以右多个主体,但只能有一个表头 -->
<tbody>
<!-- tobody浏览器自动生成,但是代码必须写,否则js取值可能出错 -->
<tr>
<td>a100</td>
<td>手机</td>
<td>999</td>
<td>部</td>
<td>1</td>
<td>999</td>
</tr>
<tr>
<td>a100</td>
<td>电脑</td>
<td>999</td>
<td>部</td>
<td>1</td>
<td>999</td>
</tr>
<tr>
<td>a100</td>
<td>电话</td>
<td>999</td>
<td>部</td>
<td>1</td>
<td>999</td>
</tr>
<tr>
<td>a100</td>
<td>相机</td>
<td>999</td>
<td>部</td>
<td>1</td>
<td>999</td>
</tr>
</tbody>
<tbody>
<tr>
<td>b1</td>
<td>手机</td>
<td>999</td>
<td>部</td>
<td>1</td>
<td>999</td>
</tr>
<tr>
<td>b2</td>
<td>电脑</td>
<td>999</td>
<td>部</td>
<td>1</td>
<td>999</td>
</tr>
<tr>
<td>b3</td>
<td>电话</td>
<td>999</td>
<td>部</td>
<td>1</td>
<td>999</td>
</tr>
<tr>
<td>b4</td>
<td>相机</td>
<td>999</td>
<td>部</td>
<td>1</td>
<td>999</td>
</tr>
</tbody>
</table>
<!-- 分页 -->
<p class="page">
<a href="">首页</a>
<a href="">...</a>
<a href="">6</a>
<a href="">7</a>
<a href="">尾页</a>
</p>
效果图
行与列的合并
colspan:合并行
rowspan:合并列
<table border="1">
<caption>合肥市第三十六小学课程表</caption>
<thead>
<tr>
<!-- 合并行 -->
<th colspan="2"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
</thead>
<tbody>
<tr>
<!-- 合并列 -->
<td rowspan="4" bgcolor="#ccc">上午</td>
<td>1</td>
<td>数学</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>2</td>
<td>数学</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>3</td>
<td>数学</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>4</td>
<td>数学</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<th colspan="9" bgcolor="#ccc">中午休息</th>
</tr>
<tr>
<!-- 合并列 -->
<td rowspan="3" bgcolor="#ccc">下午</td>
<td>5</td>
<td>数学</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>6</td>
<td>数学</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>7</td>
<td colspan="8" bgcolor="#ccc">课外活动:各班自行组织自愿参加</td>
</tr>
</tbody>
</table>
效果图