web表格

清初 / 2023-05-06 / 原文

1.表格的定义

HTML中表格由<table>标签来定义。每个表格均有若干行（由 <tr>标签定义），每行被分割为若干单元格（由<td>标签定义），表格标题由<caption>标签指定,表头由<th>标签指定。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

其定义格式如下：

点击查看代码

<!-- edu_11_1_1.html --> 表格的定义
<table style="width: 300px;" border="1">
  <tbody>
    <tr><th>两个维护</th><th>提出时间</th></tr>
    <tr>
      <td>政治意识</td>
      <td>2016年1月29日</td>
    </tr>
    <tr>
      <td>大局意识</td>
      <td>2016年1月29日</td>
    </tr>
    <tr>
      <td>核心意识</td>
      <td>2016年1月29日</td>
    </tr>
    <tr>
      <td>看齐意识</td>
      <td>2016年1月29日</td>
    </tr>
  </tbody>
</table>

显示效果：

2.语法说明

•table 标记是成对标记，< table >表示表格开始，< /table >表示表格结束。

•caption 标记是成对标记，< caption >表示标题开始，< /caption >表示标题结束。使用
caprion 标记可以给表格添加标题，该标题应位于 table 标记与 tr 标记之同的任何位置。

•t(Table Row)标记是成对标记，< tr >表示行开始，＜ /tr >表示行结束。

•th(Table Heading 表头)标记是成对标记，< th >表示表头开始，＜ /th > 表示表头结束。
设计表格时，表头常常作为表格的第 1行或者第1列，用来对表格单元格的内容进行说明。表头文字内一般居中、加粗显示。

•td(Table Data)标记是成对标记，定义单元格或列。以< td >开始，以< /td >结束。表头可以用切标记定义，也可以用 td 标记定义，但< td >＜/td>两标记之间的内容不自动居中、加粗。

在一个表格中，可以插人多个tr标记，表示多行，一组< tr >…＜/tr>标记表示插入一行。
一行中可以有多个列，列（也称为单元格）中的内容可以是文字、数据、图像、超链接、
表単元素等。

点击查看代码

<!-- edu_11_2_1.html --> 定义标记
<style><!--
td{text-align: center;}
        #bg{background: #E0E0E0;}
--></style>
<table style="width: 700px;" border="1"><!-- 表格标题 --><caption><strong>核心价值观</strong></caption>
<tbody>
<tr id="bg">
<td>富强</td>
<td>民主</td>
<td>文明</td>
<td>和谐</td>
<td>自由</td>
<td>平等</td>
</tr>
<tr>
<td>公正</td>
<td>法治</td>
<td>爱国</td>
<td>敬业</td>
<td>诚信</td>
<td>友善</td>
</tr>
</tbody>
</table>

3.表格的属性

1. 表格属性列表性质

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式。（不推荐使用，用样式代替）
bgcolor	颜色名字或颜色二进制代码	规定表格的背景颜色。（不推荐使用，用样式代替）
border	1或者其他" "	规定表格单元是否拥有边框，默认为" "，表示没有边框。
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素。
cellspacing	像素值	规定单元格之间的空白，默认为2像素。
width	像素值或百分比	规定表格的宽度。

点击查看代码

<!-- edu_11_3_1.html --> 设置表格边框、背景、范围
<style><!--
h4{text-align: center;color: #0033cc;}
        td{text-align: center;}
--></style>
<h4>设置表格边框、背景、范围</h4>
<table style="width: 700px;" border="15" align="center" bgcolor="#99cccc">
<tbody>
  <tr><th>提出时间</th><th>四个自信</th></tr>
  <tr>
    <td>2016年1月29日</td>
    <td>道路自信</td>
  </tr>
  <tr>
    <td>2016年1月29日</td>
    <td>理论自信</td>
  </tr>
  <tr>
    <td>2016年1月29日</td>
    <td>制度自信</td>
  </tr>
  <tr>
    <td>2016年1月29日</td>
    <td>文化自信</td>
  </tr>
  </tbody>
</table>
<hr />
<table style="width: 700px;" border="15px" align="center" bgcolor="#00cccc">
<tbody>
  <tr><th>提出时间</th><th>四个自信</th></tr>
  <tr>
    <td>2016年1月29日</td>
    <td>道路自信</td>
  </tr>
  <tr>
    <td>2016年1月29日</td>
    <td>理论自信</td>
  </tr>
  <tr>
    <td>2016年1月29日</td>
    <td>制度自信</td>
  </tr>
  <tr>
    <td>2016年1月29日</td>
    <td>文化自信</td>
  </tr>
</tbody>
</table>

显示效果

2. 表格边框样式属性

frame属性值	描述
void	不显示外侧边框。
above	显示上部的外侧边框。
below	显示下部的外侧边框。
hsides	显示上部和下部的外侧边框。
vsides	显示左右两边的外侧边框。
lhs	显示左边的外侧边框。
rhs	显示右边的外侧边框。
box	在所有四个边上显示外侧边框。
border	在所有边上显示外侧边框。

点击查看代码

<!-- edu_11_3_2.html --> 设置边框样式
<table style="width: 400px;" border="2" frame="'hsides" rules="all"><caption><strong>表格边框样式定义</strong></caption>
<tbody>
  <tr><th>四个全面</th><th>时间</th></tr>
  <tr>
    <td>全面建设社会主义现代化国家</td>
    <td>2012年11月</td>
  </tr>
  <tr>
    <td>全面深化改革</td>
    <td>2012年11月</td>
  </tr>
  <tr>
    <td>全面依法治国</td>
    <td>2012年11月</td>
  </tr>
  <tr>
    <td>全面从严治党</td>
    <td>2012年11月</td>
  </tr>
  </tbody>
</table>

显示效果

3. 表格行属性

属性	值	描述
align	right left center justify char	定义表格行的内容对齐方式
bgcolor	颜色名字或颜色二进制代码	设置表格行的背景颜色（一般不使用，用样式取而代之）
char	character	规定根据哪个字符来进行文本对齐
charoff	number	规定第一个对齐字符的偏移量
valign	top、middle、bottom、baseline	规定表格行中内容的垂直对齐方式

点击查看代码

设置行内容对齐方式
<style><!--
td{background: #ccffcc;}
--></style>
<table style="width: 450px;" border="1" align="center"><caption><strong>学生信息表(设置表行内容对齐方式)</strong></caption>
  <tbody>
    <tr><th>两个务必</th><th>时间</th></tr>
    <tr align="left" valign="top">
      <td>务必使同志们继续地保持谦虚、谨慎、不骄、不躁的作风</td>
      <td>七届二中全会</td>
    </tr>
    <tr align="right" valign="bottom">
      <td>务必使同志们继续地保持 艰苦奋斗 的作风</td>
      <td>七届二中全会</td>
    </tr>
  </tbody>
</table>

显示效果

4.表格嵌套

概念

表格嵌套是一种常用的页面布局方式。利用表格联套可以设计比较复杂且美观的页面效果。通常情況下，使用表格联套时，表格不宜过多使用，否则会降低网站访问速度。表格嵌套一般采用在单元格内联套表格。

基本语法

点击查看代码

<table>
    <tr>
        <td>              
            <!-- 单元格内嵌套表格 -->
            <table>
                <tr>
                    <td>....</td>
                    ....
                </tr>

                <tr>
                    <td>...</td>
                    ....
                </tr>
            </table>
        </td>
        <td>...</td>
            ....
    </tr>
    ...
</table>

例子

点击查看代码

表格嵌套
<style><!--
ul{list-style-type: none;}
        li{width: 80px;background: #f00;}
        p{text-indent: 2em; font-size: 16px;}
--></style>
<h4 align="center">表格嵌套</h4>
<table style="width: 660px;" border="1" align="center">
<tbody>
<tr>
<td width="170px">&nbsp;</td>
<td rowspan="3" width="360px">
<p>每当党中央作出重大决策部署，我们就号召全党同志加强学习，以统一全党思想和行动，汇聚起攻坚克难、团结奋进的强大力量。这是党的一条成功经验。&rdquo;</p>
<p>　　在党的百年奋斗历程中，面对新形势新任务，我们党总是号召全党同志加强学习；而每次这样的学习热潮，都能推动党和人民事业实现大发展大进步</p>
</td>
<td width="120">新闻链接</td>
</tr>
<tr>
<td>
<table style="width: 100%;" border="1">
<tbody>
<tr>
<td>重要论述</td>
</tr>
<tr>
<td>要闻要论</td>
</tr>
<tr>
<td>党史资料</td>
</tr>
</tbody>
</table>
</td>
<td rowspan="2">
<ul>
<li><a href="https://www.baidu.com">百度</a></li>
<li><a href="https://www.163.com">网易</a></li>
<li><a href="https://www.sina.com">新浪</a></li>
<li><a href="https://www.sohu.com">搜狐</a></li>
</ul>
</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

效果显示