①表格标签
标签 | 意义 |
---|---|
<caption> | 定义表格标题 |
<col> | 定义表格中列的属性 |
<colgroup> | 定义表格列的组 |
<table> | 定义表格 |
<tbody> | 定义表格主体 |
<td> | 定义表格单元 |
<tfoot> | 定义表格页脚 |
<th> | 定义表格表头 |
<thead> | 定义表格页眉 |
<tr> | 定义表格的行 |
②一个简单的表格
<!DOCTYPE html>
<html>
<body>
<p>下面是一个简单的表格</p>
<table border="1">
<caption>简单的表格</caption>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>99</td>
</tr>
</table>
</body>
</html>
table 中的border属性值设为"1"表示该表格是一个有框的表格,如果改为<table border="0">:
③突出表头
上个例子中,表格中的数据都为普通的单元,而“姓名”所在行的内容作为他们各自列的标题,应该突显出来。
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
将需要设置为表头的内容用<th></th>标签包围,即可将表头内容加粗居中显示。
④让写入的内容横向排列
上面的例子中之所以内容会竖向排列,是因为表格的宽度自适应内容,保证宽度最小的同时汉字自动换行了,如果我们在加一个比较长的数据:
<!DOCTYPE html>
<html>
<body>
<p>下面是一个简单的表格</p>
<table border="1">
<caption>简单的表格</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>99</td>
<td>123456789</td>
</tr>
</table>
</body>
</html>
可以发现电话那行是横向排列的。
但并不是只能增长单元格内容的长度来迫使它写在一行,我们可以自行设置表格单元格的宽度。
比如设置为"500px":
<table border="1" width="500px">
⑤跨行或列的单元格
<!DOCTYPE html>
<html>
<body>
<p>跨列</p>
<table border="1" width="500px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
<th colspan="2">绰号</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>99</td>
<td>123456789</td>
<td>老张</td>
<td>小三</td>
</tr>
</table>
<p>跨行</p>
<table border="1" width="500px">
<tr>
<th>姓名</th>
<td>张三</td>
</tr>
<tr>
<th>性别</th>
<td>男</td>
</tr>
<tr>
<th>年龄</th>
<td>99</td>
</tr>
<tr>
<th>电话</th>
<td>123456789</td>
</tr>
<th rowspan="2">绰号</th>
<td>老张</td>
<tr>
<td>小三</td>
</tr>
</table>
</body>
</html>
⑥单元格内可以添加其它标签
<!DOCTYPE html>
<html>
<body>
<table border="1" width="400px">
<caption>单元格内可以添加其他标签</caption>
<tr>
<td width="200px">段落:
<p>第一个段落</p>
<p>第二个段落</p>
</td>
<td width="200px">一个表格:
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="200px">一个列表:
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</td>
<td width="200px">一般内容</td>
</tr>
</body>
</html>
⑦单元格边距或间距
<!DOCTYPE html>
<html>
<body>
<table border="1" width="100px">
<caption>一般表格</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<table border="1" width="100px" cellpadding="10">
<caption>设置了边距后</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<table border="1" width="100px" cellspacing="10">
<caption>设置了间距后</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</body>
</html>
⑧添加背景颜色或背景图像
<!DOCTYPE html>
<html>
<body>
<table border="1" width="160px" bgcolor="blue">
<caption>蓝色背景的表格</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<table border="1" width="160px" background="./背景.jpg">
<caption>背景图片填充的表格</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</body>
</html>
⑨靠左或右排列内容
<!DOCTYPE html>
<html>
<body>
<table border="1" width="140px">
<caption>表格</caption>
<tr>
<td align="left">1</td>
<td align="left">2</td>
</tr>
<tr>
<td align="right">3</td>
<td align="right">4</td>
</tr>
</body>
</html>
10.框架属性
<html>
<body>
<p>frame="above":</p>
<table frame="above">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<p>frame="below":</p>
<table frame="below">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<p>frame="box":</p>
<table frame="box">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<p>frame="hsides":</p>
<table frame="hsides">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<p>frame="vsides":</p>
<table frame="vsides">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>