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. SES 之全局搜索小记

    @2018-12-17 [小记] SES 使用全局搜索时,变量所在的头文件没有被检索出来,选中检索属性中的 Dependencies 就可以了

  2. 【dfs】p1731 生日蛋糕

    1441:[例题2]生日蛋搞 [题目描述] 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆柱体.设从下往上数第i(1≤i≤M)层蛋糕是半径为Ri, 高 ...

  3. 「FJOI2016」神秘数 解题报告

    「FJOI2016」神秘数 这题不sb,我挺sb的... 我连不带区间的都不会哇 考虑给你一个整数集,如何求这个神秘数 这有点像一个01背包,复杂度和值域有关.但是你发现01背包可以求出更多的东西,就 ...

  4. 构建FTP服务

    一.配置YUM仓库服务--------------YUM服务器------------------client------------------192.168.1.1 192.168.1.10[ro ...

  5. BZOJ3566: [SHOI2014]概率充电器 树形+概率dp

    3566: [SHOI2014]概率充电器 Time Limit: 40 Sec  Memory Limit: 256 MBSubmit: 1888  Solved: 857[Submit][Stat ...

  6. VMware配置centos虚拟机静态ip

    1. 安装centos,这个自己安装就好了 2. 配置配置虚拟机静态ip桥接器 配置ip地址 2. 配置网络共享中心 这里面的默认网关填写之前我们配置的网络网关ip默认为192.168.6.2 3. ...

  7. hihocoder--1384 -- Genius ACM (倍增 归并）

    题目链接 1384 -- Genius ACM 给定一个整数 m,对于任意一个整数集合 S,定义“校验值”如下:从集合 S 中取出 m 对数(即 2*M 个数,不能重复使用集合中的数,如果 S 中的整 ...

  8. JS小积累（一）— 判断在线离线

    JS小积累-判断在线离线 作者: 狐狸家的鱼 Github: 八至 if(window.navigator.onLine==true){ console.log('online'); ... } el ...

  9. A1018. Public Bike Management

    There is a public bike service in Hangzhou City which provides great convenience to the tourists fro ...

  10. 软件在 win7 上运行时显示乱码

    一个用户反应后,我当时就蒙圈了,因为之前从未遇到过: 百度一下后,发现用户的这种情况比较特殊,从表面上看,[控制面板]和[注册表]相关项设置都正常,为什么还显示乱码呢? 到最后一步如果已经是(简体,中 ...