HTML基础——表格的应用

玫瑰小妖 2019-12-07

一、表格标签

1、基本格式：

每个表格由 table 标签开始。
　　每个表格行由 tr 标签开始。
　　每个表格数据由 td 标签开始。

例如：

<html>
    <head>
        <title>表格标签</title>
        <meta charset="utf-8"/>
    </head>
    
    <body>
        <table border="1">
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
    </body>
</html>

表格标题：<caption>标签：

表格表头：<th>标签

例如：

<html>
    <head>
        <title>表格标签</title>
        <meta charset="utf-8"/>
    </head>
    
    <body>
        <table border="1">
        <caption>一个表格</caption>
            <tr><th>1-1</th><td>1-2</td><td>1-3</td></tr>
            <tr><th>2-1</th><td>2-2</td><td>2-3</td></tr>
            <tr><th>3-1</th><td>3-2</td><td>3-3</td></tr>
        </table>
    </body>
</html>

2、属性：

width:表格宽度
height:表格高度
border:边框
cellspacing:是表格里单元格之间的距离
cellpadding:表格里单元格内的空白部分
align:表格水平位置
summary:规定表格的摘要
bgcolor:规定表格的背景颜色(不赞成使用)
align:
	规定表格现象对周围元素的对齐方式。
值：left	 center  righnt();

<td>的属性：
*colspan="列数"
*rowspan="行数"

例1(表格边框)：

<html>
    <head>
        <title>设置表格边框</title>
        <meta charset="utf-8"/>
    </head>
    
    <body>
        <h4>表格边框属性：设置无边框</h4>
        <table>
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
        
        <h4>表格边框属性：设置为border="1"</h4>
        <table border="1">
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
        
        <h4>表格边框属性：设置为border="8"</h4>
        <table border="8">
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
    </body>
</html>

例2(跨行跨列表格)：

<html>
    <head>
        <title>表格标签</title>
        <meta charset="utf-8"/>
    </head>
    
    <body>
        <table border="1">
        <caption>一个表格</caption>
            <!--rowspan实现跨行-->
            <tr><td rowspan="2">1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-2</td><td>2-3</td></tr>
            <!--colspan实现跨列-->
            <tr><td colspan="2">3-1</td><td>3-3</td></tr>
        </table>
    </body>
</html>

例3(设置单元格间距):

<html>
    <head>
        <title>设置单元格间距</title>
        <meta charset="utf-8"/>
    </head>
    
    <body>
        <h4>单元格无间距</h4>
        <table border="1">
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
        
        <h4>单元格间距为8</h4>
        <table border="1" cellspacing="8"/>
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
    </body>
</html>

例4(单元格的边距):

<html>
    <head>
        <title>设置单元格边距</title>
        <meta charset="utf-8"/>
    </head>
    
    <body>
        <h4>默认单元格边距</h4>
        <table border="1">
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
        
        <h4>单元格边距为设置8</h4>
        <table border="1" cellpadding="8"/>
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
    </body>
</html>

例4(为单元格添加背景颜色或者背景图像):

<html>
    <head>
        <title>添加单元格背景</title>
        <meta charset="utf-8"/>
    </head>
    
    <body>
        <h4>背景设置为红色</h4>
        <table border="1" bgcolor="red">
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
        
        <h4>背景设置为蓝色</h4>
        <table border="1" bgcolor="blue"/>
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
        
        <h4>为表格单元添加背景颜色</h4>
        <table border="1" bgcolor="blue"/>
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
    </body>
</html>

例5(对齐方式):

<html>
    <head>
        <title>表格的对齐方式</title>
        <meta charset="utf-8"/>
    </head>
    
    <body>
         <table width="400" border="1">
             <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>
    </body>
</html>

例6(表格frame属性——配置边框是否可见)：

<html>
    <head>
        <title>表格frame属性</title>
        <meta charset="utf-8"/>
    </head>
    
    <body>
        <!--有边框-->
        <p style="color:blue"><strong>frame="box":</strong></p>
        <table frame="box">
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
        <!--只有上边框-->
        <p style="color:blue"><strong>frame="above":</strong></p>
        <table frame="above">
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
        <!--只有下边框-->
        <p style="color:blue"><strong>frame="below":</strong></p>
        <table frame="below">
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
        <!--只有上下边框-->
        <p style="color:blue"><strong>frame="hsides":</strong></p>
        <table frame="hsides">
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
        <!--只有左右边框-->
        <p style="color:blue"><strong>frame="vsides":</strong></p>
        <table frame="vsides">
            <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
            <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
            <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
        </table>
    </body>
</html>

3.thead、tbody、tfoot

表格一般分为三部分：

  • thead：表格的头，用来存放标题之类的内容。
  • tbody：表格的身体，用来存放数据本体内容。
  • tfoot：表格的脚，用来存放表格的脚注之类的内容。

在写html代码时候，thead、tbody和tfoot的内容（不论在html代码中三者的先后顺序如何），最终呈现出来的都是thead、tbody和tfoot的顺序。

一般表格需要页面需要表格加载完全后才会显示出来。而加上thead、thead和tfoot后，会优先加载tbody的内容。

 

玫瑰小妖

玫瑰小妖

相关推荐

js实现表格单列按字母排序

本文实例为大家分享了js实现表格单列按字母排序的具体代码，供大家参考，具体内容如下。<link href="../css/表格数据搜索.css" rel="stylesheet">. <input

移动开发与培训 / 0评论 2020-08-16

js实现表格数据搜索

<input type="text" placeholder="搜索..." id="myInput" onkeyup="myFunction()">

ReunionIsland / 0评论 2020-08-16

表格标签的使用

在HTML网页中，要想创建表格，就需要使用表格相关的标签。表格包含三对HTML标签，分别为<table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标

行吟阁 / 0评论 2020-08-09

HTML5标签2

表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...

gufudhn / 0评论 2020-08-09

Asp.net Form 动态产生表格核心后台代码

<asp:Button ID="btnProTable" runat="server" Text="产生表格" />

swiftwwj / 0评论 2020-07-05

HTML-表格

表格由<table>标签来定义，其中行由<tr>标签定义，列由<td>标签定义。快速写行和列的方法为：eg:6行7列可以写成：tr*6>td*7然后按enter键。表头由<th>标签定义，设置行高的属性

pythonclass / 0评论 2020-06-25

html学习

图像标签　　<img src="图像url" alt= “图像显示不出来显示此文字” title=“鼠标在图片上提示的文字” width="宽度" heigth="heigth" borde

nercon / 0评论 2020-06-14

通过css润色html表格

--th和td都是单元格，th里的内容会默认加粗并且居中 -->. 这样是不是高档了很多。

coulder / 0评论 2020-06-09

html table表格斜线表头的实现方法总汇

在html中给table加一个斜线的表头有时是很有必要的，但是到底该怎么实现这种效果呢？总结了以下几种方法：。其实了解css3的朋友，一看到这个效果，脑子中瞬间出现的就是transform这个属性，是的，这个确实可以，也很简单，就是有一个问题要注意浏览器的

玫瑰小妖 / 0评论 2020-06-07

2020/6/3 JS 对表格元素进行增删改操作和事件监听

　　insertRow：在指定索引位置插入一行。　　createCaption()：为该表格创建标题。　　deleteRow：删除表格中index索引处的行。　　使用返回值改变HTML元素的默认行为：HTML元素大都包含了自己的默认行为，例如：超链接、提交

pythonclass / 0评论 2020-06-03

html table表格标签内容如何居中显示？表格的align属性的用法介绍

本篇文章主要的介绍了关于HTML 表格table标签的居中使用，还有关于align属性在table表格标签中的使用方法，可以帮助表格对齐和表格中的文本对齐。接下来让我们来看看这篇文章吧。align 属性规定表格相对于周围元素的对齐方式。通过运用align属

lyg0 / 0评论 2020-05-28

基于JavaScript实现表格隔行换色

我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色。table对象 集合 cells[]：返回包含表格中所有单元格的一个数组。确定事件: 文档加载完成 onload 2. 事件

huzijia / 0评论 2020-05-08

HTML &lt;thead&gt; 标签

<thead> 标签仅得到所有主流浏览器的部分支持。<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。thead 元素应该与tbody和tfoot元素结合起来使用。它们的出现次序是：thead、tfoot

行吟阁 / 0评论 2020-05-11

HTML &lt;tfoot&gt; 标签

<tfoot> 标签仅得到所有主流浏览器的部分支持。<tfoot> 标签定义表格的页脚。tfoot 元素应该与thead和tbody元素结合起来使用。thead 元素用于对 HTML 表格中的表头内容进行分组，而 tbody 元素用

黎豆子 / 0评论 2020-05-11

HTML &lt;tbody&gt; 标签

<tbody> 标签仅得到所有主流浏览器的部分支持。<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。tbody 元素应该与thead和tfoot元素结合起来使用。它们的出现次序是：thead、tfoo

玫瑰小妖 / 0评论 2020-05-11

HTML表单

--表格头，内容居中，加粗显示-->. <input>标签:<input type="类型属性" name="名称" ……<div>标签是一个区块容器标记，<div>&

HSdiana / 0评论 2020-05-10

el-table 表格循环多张图片

-- 图片有多张的情况 先分隔为数组 然后利用v-for 遍历得到 src -->. <el-image style="width: 50px; height: 50px; margin-right: 10px;" :sr

黎豆子 / 0评论 2020-05-08

html表格显示

<table border="1" height="300" width="300"> <tr> <td>朱仁贵</td>

haocxy / 0评论 2020-04-11

demo48-表格标签

th:表头,t是table的意思,h是header的意思.所以th合起来就是表格头标签.简称表头标签

黎豆子 / 0评论 2020-03-28

demo49-表格合并

<!DOCTYPE html>. width: 1000px;height: 50px;border: 1px solid black;border: 1px solid black;<!--表格合并-->. <!--. &l

haocxy / 0评论 2020-03-28

table边框表头单元格空间合并等设置

表格由<table>标签来定义,每个表格均有若干行，每行被分割为若干单元格。字母 td 指表格数据，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。HTML 表格和边框属性,如果不定义边框属性，表格将不显示

HSdiana / 0评论 2020-03-28

第八节 HTML表格

<td rowspan="5" width="20%"><img src="图片1.png" alt="人物"></td>

lyg0 / 0评论 2020-03-05

HTML基础标签图片文本超链接列表表格表单介绍

图片路径地址分为本地图片和网络图片，本地图片中分为绝对路径和相对路径，相对路径属于平级关系，如果图片相对于上一级，表现形式为"../"在<imgsrc="图片路径地址"alt="属性名" t

行吟阁 / 0评论 2020-02-12

1.8、html表格

传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：。border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格

行吟阁 / 0评论 2020-02-03

jQuery---表格删除案例

$("#j_tb").empty();});$(this).parent().parent().remove();});$(‘<tr> <td>jQuery111</td> <td>传智播

黎豆子 / 0评论 2020-02-01

HTML基本标签（下）

表格主要用于显示，展示数据，因为它可以让数据显示的非常完整，提高数据的可读性，特别是后台展示数据的时候，能够熟练地运用表格就显得非常重要。一个清爽简约的表格能够把繁杂的数据显示得很有条理。<table> <tr>

pythonclass / 0评论 2020-01-23

table sorter插件，对表格进行排序

table sorter插件可以将带有THEAD和TBODY标签的标准HTML表转化成可排序表，而无需刷新页面。Table sorter可以成功地解析多种类型的数据并进行排序。

srchange / 0评论 2013-05-31

JS表格的动态操作完整示例

本文实例讲述了JS表格的动态操作。分享给大家供大家参考，具体如下：。ta.deleteRow; //进行删除操作时，我们用父类对象删除子类对象，innerHTML是对其内部的内容进行重写。--align可以直接把整个表格居中-->

madewobadan / 0评论 2020-01-13

表格树形结构

ztree插件不是树形的；领导说layui 树形结构，可以参考下。搜索看了下html结构，是通过margin-left来区分层级的；所有节点都是同级的tr；通过javascript配合父级菜单的span图标进行控制展开和折叠；折叠式隐藏作为子级的tr；展开

swiftwwj / 0评论 2020-01-08

JS动态添加删除表格数据

<!

pythonclass / 0评论 2019-12-29

HTML表格模板

HTML表格1.<table>标签：声明一个表格，它的常用属性如下：border属性：定义表格的边框，设置值是数值cellpadding属性：定义单元格内容与边框的距离，设置是数值cellspacing属性：定义单元格与单元格之间的距离，设置值

玫瑰小妖 / 0评论 2019-12-23

前端杂项

display：none|inline|block| list-item |inline-block|table| inline-table | table-caption | table-cell | table-row | table-row-grou

qsdnet我想学编程 / 0评论 2019-12-16

JS实现控制表格行内容垂直对齐的方法

本文实例讲述了JS实现控制表格行内容垂直对齐的方法。分享给大家供大家参考。I need a long text for this example.希望本文所述对大家的javascript程序设计有所帮助。

eboyhaining / 0评论 2015-03-30

表格中的colspan colspan

<!DOCTYPE html>. <meta name="viewport" content="width=device-width, initial-scale=1.0">. <met

swiftwwj / 0评论 2019-12-06

HTML表格中各元素标签的位置对style属性有效性的影响

开发了一个动态表格制作程序，用的是谷歌浏览器。发现几个现象，记录如下：。</tfoot> //技术文档说，要放在这里。但<thead></thead>里面的表头宽度不受影响。如果删除<tbody>和</

nercon / 0评论 2019-12-06

基于templatejs的html片段动态生成

本人由于一直从事。开发，因此在页面中编写。就越来越多，随着。的流行，在页面中以。）页面呈现，也越来越多样和复杂。在以前，我一直是通过如下代码创建一个表格。在单元格内插入内容：。上述代码看上去不是很复杂，但是在实际应用中，要想适用千变万化的表格展现形式，就。

勤能补拙孰能生巧 / 0评论 2013-09-11

Js 动态修改表格内容、对齐表格内的内容

Js 动态修改表格内容、对齐表格内的内容，主要是控制表格的TableRow对象属性，使其左对齐、右对齐、向上对齐等，大家可以根据代码进行扩展，例如学习添加向下对齐等。<input type="button" onclick=&qu

勤能补拙孰能生巧 / 0评论 2014-01-28

php+layui数据表格实现数据分页渲染代码

<button class="layui-btn layui-btn-xs layui-btn-primary spu_detail" artnum="{{d.artnum}}" value="{{d

别告诉我有Bug / 0评论 2019-10-26

HTML中的表格标签

表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰地排列数据。但是在实际制作过程中，表格更多用在网页布局的定位上。这是因为表格在文本和图像的位置控制方面都有很强的功能。表格由行、列、和单元格3部分组成，一般通过3个标记来创建，分别是表格标

玫瑰小妖 / 0评论 2019-11-21

HTML表格的使用 与 跨行跨列

<table> 　　<tr> 　　　　<th>第一个单元格的内容</th> 　　　　<th>第二个单元格的内容</th> 　　</tr&g

玫瑰小妖 / 0评论 2019-11-10

CSS 表格

使用 CSS 可以使 HTML 表格更美观。这是因为表和th/ td元素有独立的边界。为了显示一个表的单个边框，使用 border-collapse属性。Width和height属性定义表格的宽度和高度。表格中的文本对齐和垂直对齐属性。设置表格标题的位置这

swiftwwj / 0评论 2019-11-10

HTML中的table标签制作表格

HTML中有一个重要的标签table,常用于构建表格，如果你要用HTML做一张课表，那么它的table标签就可以大显身手了。下面分享出一份某小学生课表的完整HTML代码，不足的地方欢迎指正！<td rowspan="3" bgco

nercon / 0评论 2019-11-08

Ext.Net GridPanel (属性|方法|配置|详细介绍)

2、Ext.NET.Column主要配置项：id：列idheader：表头文字dataIndex：设置列与数据集中数据记录的对应关系，值为数据记录中的字段名称。

pythonclass / 0评论 2019-11-07

js动态表格

用js实现动态增加表格行数。

HSdiana / 0评论 2019-11-04

jQuery实现表格隔行换色

<table id="tbl" border="1" border-collapse="collapse" align="center" cellspacing=&quo

gunnery / 0评论 2018-09-01

免费表格手机版的4大人性化特点，友好指数爆表！

世界已经改变，一切都在移动化。移动应用的发展让移动办公成为可能，人们可以借助手机、平板电脑等终端，突破时间空间的限制。下面我们来看看免费表格手机版有哪些人性化的特点。在用户中评价比较高的FineReport，它的免费表格手机版采用原生渲染技术，专为移动处理

WebVincent / 0评论 2019-10-30

HTML常用标签三

表格主要用于显示、展示数据，因为他们可以让数据显示的非常规整，可读性非常好，特别是后台展示数据的时候，能够熟练运用表格就先的很重要，一个清爽简约的表格能够把繁杂的数据表现的很有条理。<ol> </ol> 中只能嵌套<li>

pythonclass / 0评论 2019-10-28

初始HTML_表格

<td>姓名</td><td></td><td>性别</td><td></td><td></td><td></td&g

HSdiana / 0评论 2019-10-23

原生PHP和MYSQL练习登陆验证和查询数据到表格

$sql="select * from admin where username=‘".$username."‘";echo "<table border=1><tr><td&

玫瑰小妖 / 0评论 2019-10-21