<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格</title>
</head>
<body>
<!-- HTML的表格
1.表格标签为<table>,每个表格均有若干行用<tr>,每行被分割为若干单元格用<td>。
2.<td>元素指表格的单元格内容,其内容可以是文本、图片、列表、段落、表单、水平线、表格等
3.表格的边框属性为border,不定义时将不显示边框
4.表格的表头使用<th>标签进行定义(文本一般会被粗体居中)
5.单元格内无内容时不会显示该单元格边框(常用空格占位符 解决) -->
<h1>HTML的表单</h1>
<p>没有边框的表格</p>
<table>
<tr>
<td>老大</td>
<td>伊藤润二</td>
</tr>
<tr>
<td>张三</td>
<td>李四</td>
</tr>
</table>
<p>带有标题的列表</p>
<table border="2">
<caption>名单</caption><!-- 表单标题标签 -->
<th>一班</th><th>二班</th>
<tr>
<td>老大</td>
<td> </td>
</tr>
<tr>
<td>张三</td>
<td>李四</td>
</tr>
</table>
<table border="1">
<caption>横跨俩列的单元格标签</caption>
<th>姓名</th>
<th colspan="2">电话</th><!-- colspan水平合并单元格 -->
<tr>
<td>傻鸟</td>
<td>108874</td>
<td>15157</td>
</tr>
</table>
<table border="1">
<caption>横跨俩行的单元格</caption>
<tr>
<th>姓名</th>
<td>傻鸟</td></tr>
<tr>
<th rowspan="2">电话</th><!-- rowspan垂直合并单元格 -->
<td>18874</td>
</tr>
<tr>
<td>15157</td>
</tr>
</table>
<table border="1">
<caption>表格单元格内容多样</caption>
<tr>
<td>
<p>这是一个段</p>
<p>这是另一个段</p>
</td>
<td>
<p>这里包含了另一个表格</p>
<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>
<p>这是一个列表</p>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>
HELLO
</td>
</tr>
</table>
<table border="1" cellpadding="20"><!-- cellpadding单元格内边距设置属性 -->
<caption>单元格边距</caption>
<tr>
<td>老大</td>
<td>伊藤润二</td>
</tr>
<tr>
<td>张三</td>
<td>李四</td>
</tr>
</table>
<table border="1" cellspacing="10"><!-- cellspacing单元格间距属性 -->
<caption>单元格间距</caption>
<tr>
<td>老大</td>
<td>伊藤润二</td>
</tr>
<tr>
<td>张三</td>
<td>李四</td>
</tr>
</table>
<table border="1" bgcolor="red">
<caption>表格背景颜色</caption>
<tr>
<td background="img/绿.gif">单元格的设置同理</td>
<td>伊藤润二</td>
</tr>
<tr>
<td>张三</td>
<td>李四</td>
</tr>
</table>
<table border="1" background="img/绿.gif">
<caption>表格图像背景设置</caption>
<tr>
<td > 单元格的设置同理</td>
<td>伊藤润二</td>
</tr>
<tr>
<td bgcolor="red">张三</td>
<td>李四</td>
</tr>
</table>
<table border="1" width="400">
<caption>单元格内文本排列</caption>
<tr>
<th align="left">消费项目...</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">¥241.10</td>
<td align="right">¥50.20</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">¥30.00</td>
<td align="right">¥44.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">¥730.40</td>
<td align="right">¥650.00</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">¥1001.50</th>
<th align="right">¥744.65</th>
</tr>
</table>
<p>框架属性frame,在IE浏览器中无法正确显示</p>
<p>外边框</p>
<table frame="box">
<tr>
<th>month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table><br />
<p>上边框</p>
<table frame="above">
<tr>
<th>month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table><br />
<p>下边框</p>
<table frame="below">
<tr>
<th>month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table><br />
<p>上下边框</p>
<table frame="hsides">
<tr>
<th>month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table><br />
<p>左右边框</p>
<table frame="vsides">
<tr>
<th>month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table><br />
<br />
<a href="6.HTML列表.html" style="text-decoration:none">上一节</a>
<a href="8.HTML的表单.html" style="text-decoration:none"> 下一节</a>
</body>
</html>
HTML表格
最新推荐文章于 2024-09-06 22:20:29 发布