前言
本文主要介绍HTML的表格
一、简单的实例
代码如下:为简单的两行两列的表格
日期 | 地点 |
---|---|
1.1 | csdn |
<table border="1">
<tr>
<th>日期</th>
<th>地点</th>
</tr>
<tr>
<td>1.1</td>
<td>csdn</td>
</tr>
</table>
二、HTML表格
2.1 表格的基本结构
- <table> 来定义一个表格
- <tr> 来定义表格的行,一个 tr 标签可以包含多个 th、td 元素
- <td> 、<th> 定义若干个单元格,里面可以包含文本、图片等。 th 元素内部的文本通常会居中并加粗,而td元素内的文本通常会左对齐。
2.2 表格的一些用法
- 合并单元格(表格单元横跨两列)
我们可以用 colspan 来合并左右的单元格。
语法:<td colspan="value">
value 设置单元格可以横跨的列数,value 不能设置为0,因为 colspan = “0” 浏览器使单元格横跨到列组的最后一列。
<table border="1">
<tr>
<th>日期</th>
<th>地点</th>
</tr>
<tr>
<td colspan = "2">1.1</td>
</tr>
</table>
日期 | 地点 |
---|---|
1.1 |
- 合并单元格(表格单元纵跨两列)
我们可以用 rowspan 来合并上下的单元格。
语法:<td rowspan="value">
日期 | 1.1 |
---|---|
1.1 |
<table border="1">
<tr>
<th rowspan="2">日期</th>
<td >1.1</td>
</tr>
<tr>
<td >1.1</td>
</tr>
</table>
- 边框的设置
语法 <table border="value">
value 代表边框的粗细,当 value = 0 ,则这个表格没有边框。
日期 | 地点 |
---|---|
1.1 | csdn |
<table border="5">
<tr>
<th>日期</th>
<th >地点</td>
</tr>
<tr>
<td >1.1</td>
<td >csdn</td>
</tr>
</table>
- 背景的设置
背景颜色:<table bgcolor = "red">
背景图片:<table background = "./XX.jpg">
表格单元的背景颜色:<td bgcolor = "red">
表格单元的背景图片:<td background = "./XX.jpg">
、
2.2 表格的完整结构
除了<table> 、 <td> 、<tr> 、<th> 外,完整的结构为表头、主体、脚注
- <thead> 表格的头
- <tbody> 表格的主体
- <tfoot> 表格的脚注
完整的模式如下:
<table border="1">
<thead>
<tr>
<th colspan="2">机器</th><th >信息</th>
</tr>
<tr>
<td>名称</td><td>编号</td><td>价格</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">dio</td> <td>001</td> <td>100个小面包</td>
</tr>
<tr>
<td>002</td> <td>200个小面包</td>
</tr>
<tr>
<td rowspan="2">老家伙</td><td>001</td><td>free</td>
</tr>
<tr>
<td>002</td><td>free</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</tfoot>
</table>
机器 | 信息 | |
---|---|---|
名称 | 编号 | 价格 |
dio | 001 | 100个小面包 |
002 | 200个小面包 | |
老家伙 | 001 | free |
002 | free | |
1 | 2 | 3 |