HTML标记语言中可以使用table标签创建表格。

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

1.边框属性boder

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

不使用边框属性制作一个表格和使用边框属性来显示一个带有边框的表格：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>表格标签演示</title>

</head>

<body>

    <h2>无边框的表格</h2>

    <table>

        <tr>

            <td>100</tr>

            <td>200</tr>

            <td>300</tr>

        </tr>

        <tr>

            <td>400</td>

            <td>500</td>

            <td>600</td>

        </tr>

    </table>

    <h2>有边框的表格</h2>

    <table border="1"><!--border是边框，值为边框的宽度-->

        <tr>

            <td>第一行第一列</td>

            <td>第一行第二列</td>

        </tr>

        <tr>

            <td>第二行第一列</td>

            <td>第二行第二列</td>

        </tr>

    </table>

</body>

</html>

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>表格标签演示</title>

</head>

<body>

    <h2>无边框的表格</h2>

    <table>

        <tr>

            <td>100</tr>

            <td>200</tr>

            <td>300</tr>

        </tr>

        <tr>

            <td>400</td>

            <td>500</td>

            <td>600</td>

        </tr>

    </table>

    <h2>有边框的表格</h2>

    <table border="1"><!--border是边框，值为边框的宽度-->

        <tr>

            <td>第一行第一列</td>

            <td>第一行第二列</td>

        </tr>

        <tr>

            <td>第二行第一列</td>

            <td>第二行第二列</td>

        </tr>

    </table>

    <h2>怪异操作下的表格</h2>

    <table border="1"><!--border是边框，值为边框的宽度-->

        <tr>

            <td>第一行第一列</td>

            <td>第一行第二列</td>

            <td>第一行第三列</td>

        </tr>

        <tr>

            <td>第二行第一列</td>

            <td>第二行第二列</td>

        </tr>

    </table>

</body>

</html>

2.表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<!doctype html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>表格标签演示</title>

</head>

<body>

    <table border="1">

        <tr>

            <th>Heading</th>

            <th>Another Heading</th>

        </tr>

        <tr>

            <td>H1</td>

            <td>AN1</td>

        </tr>

        <tr>

            <td>H2</td>

            <td>AN2</td>

        </tr>

</body>

</html>

3.表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>表格中的空单元格处理</title>

</head>

<body>

    <h2>表格中的空单元格处理：加上一个空格占位符即可</h2>

    <table border="2">

        <tr><!--第一行，如果有表格头的话，就用th-->

            <th>水果种类</th><!--第一列-->

            <th>价格</th><!--第二列-->

            <th>产地</th><!--第三列-->

        </tr><!--第一行完-->

        <tr>

            <td>苹果</td>

            <td>2.36</td>

            <td>富士山</td>

        </tr>

        <tr>

            <td>香蕉</td>

            <td>2.68</td>

            <td> </td><!--用普通空格可以-->

        </tr>

        <tr>

            <td>甘蔗</td>

            <td>1.68</td>

            <td>&nbsp</td><!--用空格符&nbsp也可以-->

        </tr>

</body>

</html>

4.带有标题和跨行或跨列的表格

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>带有标题和跨行或跨列的表格</title>

</head>

<body>

    <table border="1" width="500" cellpadding="10" cellspacing="1" bordercolor="blue">

        <caption>表格标题</caption>

        <tr>

            <td><div align="center">姓名</div></td>

            <td><div align="center">张三</div></td>

        </tr>

        <tr>

            <td><div align="center">年龄</div></td>

            <td><div align="center" class="STYLE1">30</div></td>

        </tr>

    </table>

        <hr/>

        <hr/>

    <table border="1" width="500" cellpadding="10" cellspacing="1" bordercolor="pink">

            <caption>表格标题</caption>

            <tr>

                <td colspan="2"><div align="center">个人信息</div></td>

            </tr>

            <tr>

                <td bgcolor="#ccffff"><div align="center">张三</div></td>

                <td><div align="center">30</div></td>

            </tr>

        </table>

        <hr/>

        <hr/>

        <table border="1" width="500" cellpadding="10" cellspacing="1" bordercolor="yellow">

        <caption>表格标题</caption>

        <tr>

            <td rowspan="2"><div align="center">个人信息</div></td>

            <td><div align="center">张三</div></td>

        </tr>

        <tr>

            <td><div align="center">30</div></td>

        </tr>

    </table>

</body>

</html>

表中格标签中还可以嵌套其他标签，也可以进行各种花式的设计，背景色或背景图片等。也可以在表格排列数据内容。在表格标签列表中的后五个标签可以增加更丰富的表格设计。

HTML第五耍 表格标签的更多相关文章

  1. python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807

    html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...

  2. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  3. 前端基础-html 列表标签,表格标签,表单标签

    一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...

  4. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  5. H5 表格标签的其它标签

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. H5 表格标签基本使用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. HTML常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  8. 9月6日表格标签（table、行、列、表头）（补）

    一.<table> <table>代表表格标签.   <table></table> 1.width  表示表格宽度,宽度表达方式有像素和百分比两种.网 ...

  9. PHP入门 - - 06-->HTML的表格标签

    表格标签<table> <table>的属性: Align: left, center, right          (表格的)位置 Border:              ...

随机推荐

  1. Python数据采集分析告诉你为何上海二手房你都买不起

    感谢关注Python爱好者社区公众号,在这里,我们会每天向您推送Python相关的文章实战干货. 来吧,一起Python. 对商业智能BI.大数据分析挖掘.机器学习,python,R等数据领域感兴趣的 ...

  2. 【Luogu2664】树上游戏（点分治）

    [Luogu2664]树上游戏(点分治) 题面 洛谷 题解 很好的一道点分治题. 首先直接点分治,考虑过每个分治重心的链的贡献. 我们从分治重心开始找每种颜色,强制令一种颜色只在其到分治重心的链上第一 ...

  3. 【Luogu3602】Koishi Loves Segments（贪心）

    [Luogu3602]Koishi Loves Segments(贪心) 题面 洛谷 题解 离散区间之后把所有的线段挂在左端点上,从左往右扫一遍. 对于当前点的限制如果不满足显然会删掉右端点最靠右的那 ...

  4. 诶西，JavaScript学习记录。。。。。。

    由于大学课程缘故,老师巨爱叫人问问题,还记分呢,随便记录一下Js的学习情况,以后复习什么的也比较方便吧...... 开始咯,就按照C语言学习那样的方法来吧! ===================== ...

  5. bzoj3160(FFT+回文自动机)

    题目描述 https://www.lydsy.com/JudgeOnline/problem.php?id=3160 题解 先把问题转化一下,我们要求的是非连续对称回文子序列. ans=回文子序列数- ...

  6. A.01.09—模块的输出—PWM低端输出

    PWM输出在汽车上的应用也比较多,它有三种不同的实现方式. 第一种由软件实现,即软件设定对一个输出口拉高和拉低的时间,形成时高时低的PWM控制:但这种方式目前用得不多,这是由使用需求和软件本身的特性决 ...

  7. PWM实现ADC和DAC

    一.PWM实现AD 利用普通单片机的2个IO及一个运算放大器即可实现AD转换电路,而且很容易扩展成多通道.其占用资源少,成本低,AD 转换精度可以达到8位甚至更高,因此具有一定的实用价值. 1.1 硬 ...

  8. Electron入门笔记（二）-快速建立hello world

    官方的文档我没有看懂,看了不少别人的博客和文章,终于慢慢看懂了如何快速的建立一个Electron app demo,前一篇文章不是使用官方快速搭建的,而且还出了小问题,所以去撸了一遍quick-sta ...

  9. 区间最深LCA

    求编号在区间[l, r]之间的两两lca的深度最大值. 例题. 解:口胡几种做法.前两种基于莫队,第三种是启发式合并 + 扫描线,第四种是lct + 线段树. ①: 有个结论就是这个答案一定是点集中D ...

  10. [luogu4860][Roy&October之取石子II]

    题目链接 思路 这个题和上个题类似,仔细推一下就知道这个题是判断是否是4的倍数 代码 #include<cstdio> #include<iostream> #define f ...