HTML第五耍表格标签

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第五耍表格标签的更多相关文章

python全栈开发 * 表格标签表单标签 css 引入方式 * 180807
html部分一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
前端基础-html 列表标签,表格标签,表单标签
一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...
Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
H5 表格标签的其它标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
H5 表格标签基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
HTML常用标签与表格标签
超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...
9月6日表格标签（table、行、列、表头）（补）
一.<table> <table>代表表格标签. <table></table> 1.width 表示表格宽度,宽度表达方式有像素和百分比两种.网 ...
PHP入门 - - 06-->HTML的表格标签
表格标签<table> <table>的属性: Align: left, center, right (表格的)位置 Border: ...

随机推荐

【BZOJ4944】【NOI2017】泳池概率DP 常系数线性递推特征多项式多项式取模
题目大意有一个\(1001\times n\)的的网格,每个格子有\(q\)的概率是安全的,\(1-q\)的概率是危险的. 定义一个矩形是合法的当且仅当: 这个矩形中每个格子都是安全的必须紧贴网格 ...
【XSY2469】graph 分治并查集
题目大意给你一张\(n\)个点\(m\)条边的无向图,问删去每个点后,原图是不是二分图. \(n,m\leq 100000\) 题解一个图是二分图\(\Longleftrightarrow\)该图 ...
Log Parser Studio 分析 IIS 日志
Log Parser Studio 分析 IIS 日志来源 https://www.cnblogs.com/lonelyxmas/p/8671336.html 软件下载地址: Log Parser ...
使用 dmidecode 查看Linux服务器信息
使用 dmidecode 查看Linux服务器信息来源 http://www.laozuo.org/6682.html 对于大部分普通服务器用户来说,我们选择VPS.服务器产品的时候比较关心的是产 ...
requirejs 使用实例r.js打包
在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install jquery@1.11.1 --save 创建基本目 ...
【Sichuan 2017D】Dynamic Graph
题意 300个点的无环图,开始都是白色,每次改变某个节点的颜色(黑/白),问有多少对白点之间存在只有白点的路径. 题解类似floyd,求出两点之间的路径条数.然后白到黑就删去对应路径,黑到白就增加对 ...
【WC2018】即时战略（动态点分治，替罪羊树）
[WC2018]即时战略(动态点分治,替罪羊树) 题面 UOJ 题解其实这题我也不知道应该怎么确定他到底用了啥.只是想法很类似就写上了QwQ. 首先链的部分都告诉你要特殊处理那就没有办法只能特殊处理 ...
js笔记-语句，变量
JavaScript介绍 JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互. JavaScript是浏览器解释执行的,前端脚 ...
django rest framework mixins
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXQAAAEZCAIAAAAIa0mAAAAU/0lEQVR4nO2d247cxoGG5y3yKH6AAf
使用Docker Swarm搭建分布式爬虫集群
https://mp.weixin.qq.com/s?__biz=MzIxMjE5MTE1Nw==&mid=2653195618&idx=2&sn=b7e992da6bd1b2 ...

HTML第五耍 表格标签