描述列表指每个列表项有单独的标题。
<!-- 描述列表 -->
<dl>
<dt>开源产品</dt>
<dd>Java封装库</dd>
<dd>Web组件库</dd>
<dt>网站导航</dt>
<dd>mrliujava.com</dd>
<dd>mrliuweb.com</dd>
</dl>
10.1 基本使用表格在网页开发中使用频率非常高,尤其是数据展示的时候。
标签 描述 table 代表表格标签 caption 表格标题 thead 表头部分 tbody 表格主体部分 tfoot 表格尾部
属性 描述 border 表格边框 cellspacing 单元格与单元格间距 width 宽度 height 高度 bgcolor 设置背景颜色 background 设置背景图片 align 对齐方式
<!-- 表格 -->
<table border="1" cellspacing="0" width="600px" height="200px">
<caption>员工薪资统计表</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职位</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>狗蛋</td>
<td>男</td>
<td>JavaEe工程师</td>
<td>8780</td>
</tr>
<tr>
<td>2</td>
<td>黑妞</td>
<td>女</td>
<td>Web前端工程师</td>
<td>9750</td>
</tr>
<tr>
<td>3</td>
<td>傻蛋</td>
<td>妖</td>
<td>测试工程师</td>
<td>996</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>当前页:1 页</td>
<td>上一页</td>
<td>下一页</td>
<td>尾页</td>
<td>共 3 页</td>
</tr>
</tfoot>
</table>
属性 说明 rowspan 行合并 colspan 列合并
下面是行合并:
<!-- 表格 -->
<table border="1" cellspacing="0" width="600px" height="200px">
<caption>员工薪资统计表</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职位</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>狗蛋</td>
<td>男</td>
<td rowspan="2">JavaEe工程师</td>
<td>8780</td>
</tr>
<tr>
<td>2</td>
<td>黑妞</td>
<td>女</td>
<td>9750</td>
</tr>
<tr>
<td>3</td>
<td>傻蛋</td>
<td>妖</td>
<td>测试工程师</td>
<td>996</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>当前页:1 页</td>
<td>上一页</td>
<td>下一页</td>
<td>尾页</td>
<td>共 3 页</td>
</tr>
</tfoot>
</table>
下面是列合并:
<!-- 表格 -->
<table border="1" cellspacing="0" width="600px" height="200px">
<caption>员工薪资统计表</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>职位</th>
<th>薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>狗蛋</td>
<td>男</td>
<td>JavaEe工程师</td>
<td>8780</td>
</tr>
<tr>
<td>2</td>
<td>黑妞</td>
<td>女</td>
<td>Web前端工程师</td>
<td>9750</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">傻蛋</td>
<td>测试工程师</td>
<td>996</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>当前页:1 页</td>
<td>上一页</td>
<td>下一页</td>
<td>尾页</td>
<td>共 3 页</td>
</tr>
</tfoot>
</table>