表格
表格由<table> 标签来定义。每个表格的若干行(由<tr> 标签定义),每行被分割为若干单元格(由<td> 标签定义,即列)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
table标签常用属性:
width:表格宽度 单位px(可省略)
height:表格高度 单位px(可省略)
align:表格对齐方式 left|center|right
border:边框属性。边框宽度值。不定义边框属性,表格就不显示边框。
cellpadding:单元格的内边距
cellspacing:单元格的外边距
td标签的合并单元格相关属性:
rowspan:行合并
colspan:列合并
基本结构:
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
<html>
<body>
<h3>两行三列小栗子:</h3>
<table border="3">
<tr>
<td>哈哈</td>
<td>呵呵</td>
<td>嘻嘻</td>
</tr>
<tr>
<td>哼哼</td>
<td>嗯嗯</td>
<td>噢噢</td>
</tr>
</table>
</body>
</html>
表格的表头 使用<th>标签进行定义:
栗子延伸:
<html>
<body>
<table border="3">
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>哈哈</td>
<td>呵呵</td>
<td>嘻嘻</td>
</tr>
<tr>
<td>哼哼</td>
<td>嗯嗯</td>
<td>噢噢</td>
</tr>
</table>
<br/>
<br/>
<table border="2">
<tr>
<th>表头1</th>
<td>哈哈</td>
<td>哼哼</td>
</tr>
<tr>
<th>表头2</th>
<td>呵呵</td>
<td>嗯嗯</td>
</tr>
<tr>
<th>表头3</th>
<td>嘻嘻</td>
<td>噢噢</td>
</tr>
</table>
</body>
</html>
图示:
<tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。
<html>
<body>
<h4>带标题的粗边框表格</h4>
<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<br/>
<br/>
<h4>横跨两列的单元格</h4>
<table border="1">
<tr>
<th colspan="2">姓名</th>
<th>职业</th>
</tr>
<tr>
<td>小白</td>
<td>小黑</td>
<td>攻城狮</td>
</tr>
</table>
<h4>横跨两行的单元格:</h4>
<table border="1">
<tr>
<th rowspan="2">姓名</th>
<td>小白</td>
</tr>
<tr>
<td>小黑</td>
</tr>
<tr>
<th>职业</th>
<td>攻城狮</td>
</tr>
</table>
</body>
</html>
图示:
表格内的标签:在表格内添加别的标签
<html>
<body>
<table border="2">
<tr>
<td>
<p>我是一个段落</p>
<p>我也是一个段落</p>
</td>
<td>
我这儿有个表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
我这儿有两个个列表:
<ul>
<li>橘子</li>
<li>葡萄</li>
<li>菠萝</li>
</ul>
<ul>
<li>美术</li>
<li>音乐</li>
<li>骑行</li>
</ul>
</td>
<td>该写点儿啥?</td>
</tr>
</table>
</body>
</html>
单元格内边距:
<html>
<body>
<h4>没有单元格内边距:</h4>
<table border="1">
<tr>
<td>小A</td>
<td>小B</td>
</tr>
<tr>
<td>小C</td>
<td>小D</td>
</tr>
</table>
<br/>
<h4>带有单元格内边距:</h4>
<table border="1" cellpadding="8">
<tr>
<td>小A</td>
<td>小B</td>
</tr>
<tr>
<td>小C</td>
<td>小D</td>
</tr>
</table>
</body>
</html>
图示:
单元格外边距:
<html>
<body>
<h4>没有单元格外边距:<h4>
<table border="1">
<tr>
<td>小A</td>
<td>小B</td>
</tr>
<tr>
<td>小C</td>
<td>小D</td>
</tr>
</table>
<br/>
<h4>带有单元格外边距:</h4>
<table border="1"cellspacing="8">
<tr>
<td>小A</td>
<td>小B</td>
</tr>
<tr>
<td>小C</td>
<td>小D</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<h4>没有使用align属性时:</h4>
<table width="300"border="1">
<tr>
<th>姓名</th>
<th>爱好</th>
<th>职业</th>
</tr>
<tr>
<td>小白</td>
<td>看书</td>
<td>程序猿</td>
</tr>
<tr>
<td>小黑</td>
<td>绘画</td>
<td>攻城狮</td>
</tr>
</table>
<h4>使用了align属性后:</h4>
<table width="300"border="1">
<tr>
<th align="left">姓名</th>
<th align="right">爱好</th>
<th align="right">职业</th>
</tr>
<tr>
<td align="left">小白</td>
<td align="right">看书</td>
<td align="right">程序猿</td>
</tr>
<tr>
<td align="left">小黑</td>
<td align="right">绘画</td>
<td align="right">攻城狮</td>
</tr>
</table>
</body>
</html>
图示:
<html>
<body>
<h5>frame="box":</h5>
<table frame="box">
<tr>
<th>姓名</th>
<th>爱好</th>
</tr>
<tr>
<td>小慕</td>
<td>绘画</td>
</tr>
</table>
<h5>frame="above":</h5>
<table frame="above">
<tr>
<th>姓名</th>
<th>爱好</th>
</tr>
<tr>
<td>小慕</td>
<td>绘画</td>
</tr>
</table>
<h5>frame="below":</h5>
<table frame="below":>
<tr>
<th>姓名</th>
<th>爱好</th>
</tr>
<tr>
<td>小慕</td>
<td>绘画</td>
</tr>
</table>
<h5>frame="hsides":</h5>
<table frame="hsides":>
<tr>
<th>姓名</th>
<th>爱好</th>
</tr>
<tr>
<td>小慕</td>
<td>绘画</td>
</tr>
</table>
<h5>frame="vsides":</h5>
<table frame="vsides":>
<tr>
<th>姓名</th>
<th>爱好</th>
</tr>
<tr>
<td>小慕</td>
<td>绘画</td>
</tr>
</table>
</body>
</html>
图示:
<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table width="600" align="center" border="1">
<tr>
<td>A1</td><td>A2</td><td>A3</td>
</tr>
<tr>
<td>B1</td><td>B2</td><td>B3</td>
</tr>
<tr>
<td colspan="3">
<table width="600" align="center" border="1">
<tr>
<td>C1</td>
<td>C2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
空单元格
使用 " " 处理没有内容的单元格。