HTML5表格详细教程

蒜鸟發表於 2021-1-21 19:22:00

<h1>HTML5表格</h1>
 
<div class="toc">
<h3>文章目录</h3>
<ul>
<li>HTML5表格</li>
<li>
<ul>
<li>5.1 定义表格</li>
<li>
<ul>
<li>5.1.1 普通表格、列标题</li>
<li>5.1.2 表格标题</li>
<li>5.1.3 表格行分组、表格列分组</li>
</ul>
</li>
<li>5.2 表格属性</li>
<li>
<ul>
<li>5.2.1 单线表格、分离单元格</li>
<li>5.2.2 细线边框</li>
</ul>
</li>
<li>5.3 单元格属性</li>
<li>
<ul>
<li>5.3.1 跨单元格显示、表头单元格</li>
<li>5.3.2 绑定表头、信息缩写</li>
<li>5.3.3 单元格分类</li>
</ul>
</li>
<li>5.4 项目实战</li>
<li>
<ul>
<li>5.4.2 设计产品信息列表</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
 
<h2>5.1 定义表格</h2>
<h3>5.1.1 普通表格、列标题</h3>
普通表格 一个< table >元素，以及一个或多个 tr 和 td 组成，tr 定义行，td 定义行内单元格。
<pre><code class="prism language-html"><table>
<tr>
 <td>月落乌啼霜满天，</td>
 <td>江枫渔火对愁眠。</td>
</tr>
<tr>
 <td>姑苏城外寒山寺，</td>
 <td>夜半钟声到客船。</td>
</tr>
</table>
</code></pre>
列标题 在数据表格中，每列应该包含一个标题。在数据库中这个标题称为字段，在HTML中被称为表头单元格。使用 th 元素定义表头单元格。 默认状态下，th 内文本呈现为居中、粗体显示，而td 内文本为左对齐的普通文本。
<pre><code class="prism language-html"><!doctype html>
<table>
<tr>
 <th>用户名</th>
 <th>电子邮箱</th>
</tr>
<tr>
 <td>张三</td>
 <td>zhangsan@163.com</td>
</tr>
</table>
</code></pre>
<pre><code class="prism language-html"><table>
<tr>
 <th>&nbsp;</th>
 <th>星期一</th>
 <th>星期二</th>
 <th>星期三</th>
 <th>星期四</th>
 <th>星期五</th>
</tr>
<tr>
 <th>第1节</th>
 <td>语文</td>
 <td>物理</td>
 <td>数学</td>
 <td>语文</td>
 <td>美术</td>
</tr>
<tr>
 <th>第2节</th>
 <td>数学</td>
 <td>语文</td>
 <td>体育</td>
 <td>英语</td>
 <td>音乐</td>
</tr>
<tr>
 <th>第3节</th>
 <td>语文</td>
 <td>体育</td>
 <td>数学</td>
 <td>英语</td>
 <td>地理</td>
</tr>
<tr>
 <th>第4节</th>
 <td>地理</td>
 <td>化学</td>
 <td>语文</td>
 <td>语文</td>
 <td>美术</td>
</tr>
</table>
</code></pre>
<h3>5.1.2 表格标题</h3>
< caption > 标签定义表格标题。< caption > 标签必须紧随 < table > 标签之后。 <img src="https://img-blog.csdnimg.cn/20210120200430220.png">
<pre><code class="prism language-html"><table>
<caption>通讯录</caption>
<tr>
 <th>用户名</th>
 <th>电子邮箱</th>
</tr>
<tr>
 <td>张三</td>
 <td>zhangsan@163.com</td>
</tr>
</table>
</code></pre>
<h3>5.1.3 表格行分组、表格列分组</h3>
表格行分组 < thead >定义表格的表头。 < tbody >定义一段表格主体（正文）。使用 < tbody > 标签，可以将表格分为一个单独的部分。< tbody > 标签可将表格中的一行或几行合成一组。建议最好在表格中没有 < tbody > 标签。在 < tbody > 标签中，只有 < tr > 标签可以定义表格行。并且一旦定义，一个 < tbody > 标签就是表格中的一个独立的部分。例如不能从一个 < tbody > 跨越到另一个 < tbody > 中。
< tfoot >定义表格的页脚（脚注）。
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
<pre><code class="prism language-html"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格结构</title>
<style type="text/css">
table { width: 100%; }
caption { font-size: 24px; margin: 12px; color: blue; }
th, td { border: solid 1px blue; padding: 8px; }
tfoot td { text-align: right; color: red; }
</style>
</head>
<body>
<table>
<caption>
结构化表格标签
</caption>
<thead>
 <tr>
 <th>标签</th>
 <th>说明</th>
 </tr>
</thead>
<tfoot>
 <tr>
 <td colspan="2">* 在表格中，上述标签属于可选标签。</td>
 </tr>
</tfoot>
<tbody>
 <tr>
 
 <td>&lt;thead">&gt;</td>
 <td>定义表头结构。</td>
 </tr>
 <tr>
 <td>&lt;tbody">&gt;</td>
 <td>定义表格主体结构。</td>
 </tr>
 <tr>
 <td>&lt;tfoot">&gt;</td>
 <td>定义表格的页脚结构。</td>
 </tr>
</tbody>
</table>
</body>
</html>
</code></pre>
表格列分组 < col > 标签为表格中的一个或多个列定义属性值。只能在表格或列组中使用该元素。 注释：col 元素是空元素。如需创建列，必须在 tr 元素内规定 td 元素。 提示：如果需要为一个或多个列规定属性值，请使用该元素。 提示：如果需要向一个列组规定相同的属性值，请使用 < colgroup > 元素。 <img src="https://img-blog.csdnimg.cn/20210120202209797.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTA4MzEz,size_16,color_FFFFFF,t_70">
<pre><code class="prism language-html"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="100%" border="1">
<col align="left" />
<col align="center" />
<col align="right" />
<tr>
 <td>慈母手中线，</td>
 <td>游子身上衣。</td>
 <td>临行密密缝，</td>
</tr>
<tr>
 <td>意恐迟迟归。</td>
 <td>谁言寸草心，</td>
 <td>报得三春晖。</td>
</tr>
</table>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.col1 { width:25%; color:red; font-size:16px; }
.col2 { width:50%; color:blue; }
</style>
</head>
<body>
<table width="100%" border="1">
<colgroup span="2" class="col1"></colgroup>
<colgroup class="col2"></colgroup>
<tr>
 <td>慈母手中线，</td>
 <td>游子身上衣。</td>
 <td>临行密密缝，</td>
</tr>
<tr>
 <td>意恐迟迟归。</td>
 <td>谁言寸草心，</td>
 <td>报得三春晖。</td>
</tr>
</table>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.col1 { width:25%; color:red; font-size:16px; }
.col2 { width:50%; color:blue; }
</style>
</head>
<body>
<table width="100%" border="1">
<colgroup>
 <col span="2" class="col1" />
 <col class="col2" />
</colgroup>
<tr>
 <td>慈母手中线，</td>
 <td>游子身上衣。</td>
 <td>临行密密缝，</td>
</tr>
<tr>
 <td>意恐迟迟归。</td>
 <td>谁言寸草心，</td>
 <td>报得三春晖。</td>
</tr>
</table>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">table { /* 表格默认样式 */
border:solid 1px #99CCFF;
border-collapse:collapse;}
.bg_th { /* 标题行类样式 */
background:#0000FF;
color:#fff;}
.bg_even1 { /* 列1类样式 */
background:#CCCCFF;}
.bg_even2 { /* 列2类样式 */
background:#FFFFCC;}
</style>
</head>

<body>
<table>
<caption>IE浏览器发展大事记</caption>
<colgroup>
 <col class="bg_even1" id="verson" />
 <col class="bg_even2" id="postTime" />
 <col class="bg_even1" id="OS" />
</colgroup>
<tr class="bg_th">
 <th>版本</th>
 <th>发布时间</th>
 <th>绑定系统</th>
</tr>
<tr>
 <td>Internet Explorer 1</td>
 <td>1995年8月</td>
 <td>Windows 95 Plus! Pack</td>
</tr>
<tr class="bg_even">
 <td>Internet Explorer 2</td>
 <td>1995年11月</td>
 <td>Windows和Mac</td>
</tr>
<tr>
 <td>Internet Explorer 3</td>
 <td>1996年8月</td>
 <td>Windows 95 OSR2</td>
</tr>
<tr class="bg_even">
 <td>Internet Explorer 4</td>
 <td>1997年9月</td>
 <td>Windows 98</td>
</tr>
<tr>
 <td>Internet Explorer 5</td>
 <td>1999年5月</td>
 <td>Windows 98 Second Edition</td>
</tr>
<tr class="bg_even">
 <td>Internet Explorer 5.5</td>
 <td>2000年9月</td>
 <td>Windows Millennium Edition</td>
</tr>
<tr>
 <td>Internet Explorer 6</td>
 <td>2001年10月</td>
 <td>Windows XP</td>
</tr>
<tr class="bg_even">
 <td>Internet Explorer 7</td>
 <td>2006年下半年</td>
 <td>Windows Vista</td>
</tr>
<tr>
 <td>Internet Explorer 8</td>
 <td>2009年3 月</td>
 <td>Windows 7</td>
</tr>
<tr class="bg_even">
 <td>Internet Explorer 9</td>
 <td>2011年3月</td>
 <td>Windows 7</td>
</tr>
<tr>
 <td>Internet Explorer 10</td>
 <td>2013年2月</td>
 <td>Windows 8</td>
</tr>
</table>
</body>
</html>
</code></pre>
<h2>5.2 表格属性</h2>
<h3>5.2.1 单线表格、分离单元格</h3>
单线表格 rules 属性规定内侧边框的哪个部分是可见的。从实用角度出发，最好不要规定 rules，而是使用 CSS 来添加边框样式。 < frame > 标签定义 frameset 中的一个特定的窗口（框架）。 frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等。
<pre><code class="prism language-html"><body>
<table border="1" frame="hsides"rules="rows" width="100%">
<caption>
frame属性取值说明
</caption>
<tr>
 <th>值</th>
 <th>说明</th>
</tr>
<tr>
 <td>void</td>
 <td>不显示外侧边框。</td>
</tr>
<tr>
 <td>above</td>
 <td>显示上部的外侧边框。</td>
</tr>
<tr>
 <td>below</td>
 <td>显示下部的外侧边框。</td>
</tr>
<tr>
 <td>hsides</td>
 <td>显示上部和下部的外侧边框。</td>
</tr>
<tr>
 <td>vsides</td>
 <td>显示左边和右边的外侧边框。</td>
</tr>
<tr>
 <td>lhs</td>
 <td>显示左边的外侧边框。</td>
</tr>
<tr>
 <td>rhs</td>
 <td>显示右边的外侧边框。</td>
</tr>
<tr>
 <td>box</td>
 <td>在所有四个边上显示外侧边框。</td>
</tr>
<tr>
 <td>border</td>
 <td>在所有四个边上显示外侧边框。</td>
</tr>
</table>
</code></pre>
<img src="https://img-blog.csdnimg.cn/20210120172755159.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTA4MzEz,size_16,color_FFFFFF,t_70"> 分离单元格 cellpadding 和 cellspacing 之间的主要区别在于 cellpadding 用于固定单元格边缘与其内容之间的宽度，即在文本和单元格边框之间的单元格内创建空白。而，cellspacing可以用于管理表格中单个单元格之间的空间。
<pre><code class="prism language-html"><body>
<table border="1" frame="void" cellpadding="6" cellspacing="16">
<caption>
rules属性取值说明
</caption>
<tr>
 <th>值</th>
 <th>说明</th>
</tr>
<tr>
 <td>none</td>
 <td>没有线条。</td>
</tr>
<tr>
 <td>groups</td>
 <td>位于行组和列组之间的线条。</td>
</tr>
<tr>
 <td>rows</td>
 <td>位于行之间的线条。</td>
</tr>
<tr>
 <td>cols</td>
 <td>位于列之间的线条。</td>
</tr>
<tr>
 <td>all</td>
 <td>位于行和列之间的线条。</td>
</tr>
</table>
</body>
</html>
</code></pre>
<img src="https://img-blog.csdnimg.cn/20210120173010453.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTA4MzEz,size_16,color_FFFFFF,t_70">
<h3>5.2.2 细线边框</h3>
<pre><code class="prism language-html"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1"rules="all" width="100%">
<caption>
rules属性取值说明
</caption>
<tr>
 <th>值</th>
 <th>说明</th>
</tr>
<tr>
 <td>none</td>
 <td>没有线条。</td>
</tr>
<tr>
 <td>groups</td>
 <td>位于行组和列组之间的线条。</td>
</tr>
<tr>
 <td>rows</td>
 <td>位于行之间的线条。</td>
</tr>
<tr>
 <td>cols</td>
 <td>位于列之间的线条。</td>
</tr>
<tr>
 <td>all</td>
 <td>位于行和列之间的线条。</td>
</tr>
</table>
</body>
</html>

</code></pre>
<img src="https://img-blog.csdnimg.cn/20210120173100922.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTA4MzEz,size_16,color_FFFFFF,t_70">
<h2>5.3 单元格属性</h2>
<h3>5.3.1 跨单元格显示、表头单元格</h3>
跨单元格显示
<pre><code class="prism language-html">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border=1 width="100%">
<tr>
 <th align=center colspan=5>课程表</th>
</tr>
<tr>
 <th>星期一</th>
 <th>星期二</th>
 <th>星期三</th>
 <th>星期四</th>
 <th>星期五</th>
</tr>
<tr>
 <td align=center colspan=5>上午</td>
</tr>
<tr>
 <td>语文</td>
 <td>物理</td>
 <td>数学</td>
 <td>语文</td>
 <td>美术</td>
</tr>
<tr>
 <td>数学</td>
 <td>语文</td>
 <td>体育</td>
 <td>英语</td>
 <td>音乐</td>
</tr>
<tr>
 <td>语文</td>
 <td>体育</td>
 <td>数学</td>
 <td>英语</td>
 <td>地理</td>
</tr>
<tr>
 <td>地理</td>
 <td>化学</td>
 <td>语文</td>
 <td>语文</td>
 <td>美术</td>
</tr>
<tr>
 <td align=center colspan=5>下午</td>
</tr>
<tr>
 <td>作文</td>
 <td>语文</td>
 <td>数学</td>
 <td>体育</td>
 <td>化学</td>
</tr>
<tr>
 <td>生物</td>
 <td>语文</td>
 <td>物理</td>
 <td>自修</td>
 <td>自修</td>
</tr>
</table>
</body>
</html>
</code></pre>
<img src="https://img-blog.csdnimg.cn/20210120174859834.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTA4MzEz,size_16,color_FFFFFF,t_70">
表头单元格
<pre><code class="prism language-html"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
 <th></th>
 <th scope="col">月份</th>
 <th scope="col">金额</th>
</tr>
<tr>
 <td scope="row">1</td>
 <td>9</td>
 <td>$100.00</td>
</tr>
<tr>
 <td scope="row">2</td>
 <td>4</td>
 <td>$10.00</td>
</tr>
</table>
</body>
</html>
</code></pre>
<img src="https://img-blog.csdnimg.cn/20210120174931401.png">
<h3>5.3.2 绑定表头、信息缩写</h3>
绑定表头
<pre><code class="prism language-html"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" width="100%">
<tr>
 <th id="name">姓名</th>
 <th id="Email">电子邮箱</th>
 <th id="Phone">电话</th>
 <th id="Address">地址</th>
</tr>
<tr>
 <td headers="name">张三</td>
 <td headers="Email">zhangsan@163.com</td>
 <td headers="Phone">13522228888</td>
 <td headers="Address">北京长安街38号</td>
</tr>
</table>
</body>
</html>
</code></pre>
<img src="https://img-blog.csdnimg.cn/20210120181303488.png">
信息缩写
<pre><code class="prism language-html"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
 <th>名称</th>
 <th>说明</th>
</tr>
<tr>
 <td abbr="HTML">HyperText Markup Language</td>
 <td>超级文本标记语言</td>
</tr>
<tr>
 <td abbr="CSS">Cascading Style Sheets</td>
 <td>层叠样式表</td>
</tr>
</table>
</body>
</html>
</code></pre>
<img src="https://img-blog.csdnimg.cn/2021012018143348.png">
<h3>5.3.3 单元格分类</h3>
<pre><code class="prism language-html"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" width="100%">
<tr>
 <th axis="name">姓名</th>
 <th axis="Email">电子邮</th>
 <th axis="Phone">电话</th>
 <th axis="Address">地址</th>
</tr>
<tr>
 <td axis="name">张三</td>
 <td axis="Email">zhangsan@163.com</td>
 <td axis="Phone">13522228888</td>
 <td axis="Address">北京长安街38号</td>
</tr>
</table>
</body>
</html>
</code></pre>
<img src="https://img-blog.csdnimg.cn/20210120181559926.png">
<h2>5.4 项目实战</h2>
<h3>5.4.2 设计产品信息列表</h3>
<pre><code class="prism language-html"><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选用商品列表——易购网</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header class="header">
class="header-title">选用商品列表 </p>
<div class="left-head"> <a id="goBack" href="javascript:history.go(-1);" class="tc_back"> class="inset_shadow"> class="header-return"></span> </span> </a> </div>
</header>
<section id="content">
<table cellspacing="0">
 <tbody>
 <tr>
 <th>商品名称</th>
 <th>性能特点</th>
 <th>价格</th>
 </tr>
 <tr>
 <td>苹果手机 iPhone8S(16GB)</td>
 <td>支持移动4G、3G、2G，双网自由切换，空前网络体验！</td>
 <td class="last">¥6998.00</td>
 </tr>
 <tr>
 <td>三星手机Max（白色）</td>
 <td>双卡双待，四核高速处理器</td>
 <td class="last">¥6496.00</td>
 </tr>
 <tr>
 <td>小米手机小米5（星空灰）移动版</td>
 <td>迄今为止最快的小米手机。</td>
 <td class="last">¥3099.00</td>
 </tr>
 </tbody>
</table>
</section>
</body>
</html>
</code></pre>
<img src="https://img-blog.csdnimg.cn/20210121190844490.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTA4MzEz,size_16,color_FFFFFF,t_70"> 
来源：https://www.cnblogs.com/qianduanui/p/14309948.html

頁: [1]

琼殿技术论坛's Archiver

HTML5表格详细教程