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. sql里的正则表达式

    SQL语句还可以搭配正则表达式作为查询条件,很是有用. REGEXP_LIKE(匹配)REGEXP_INSTR (包含)REGEXP_REPLACE(替换)REGEXP_SUBSTR(提取) 表 1: ...

  2. 自学Python之路-Python网络编程

    自学Python之路-Python网络编程 自学Python之路[第一回]:1.11.2 1.3

  3. [luogu3157][bzoj3295][CQOI2011]动态逆序对【cdq分治+树状数组】

    题目描述 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆序 ...

  4. [luogu3878][TJOI2010]分金币【模拟退火】

    题目描述 现在有n枚金币,它们可能会有不同的价值,现在要把它们分成两部分,要求这两部分金币数目之差不超过1,问这样分成的两部分金币的价值之差最小是多少? 分析 根据模拟退火的基本套路,先随机分两堆金币 ...

  5. [JSOI2008]Blue Mary的职员分配

    由于Blue Mary呕心沥血的管理,Blue Mary的网络公司蒸蒸日上.现在一共拥有了n名职员,可惜没有任何的金钱和声誉.平均每名每天职员都可以给公司带来x单位金钱或者y单位声誉(名利不能双全). ...

  6. SHOI2008仙人掌图（tarjan+dp）

    Solution 好题啊没的说. 本题需要求出仙人掌的直径,但仙人掌是一个带有简单环的一张图无法直接用树形dp求解,但它有一个好东西就是没有类似环套环的东西,所以我们在处理时就方便了一些. 思路:ta ...

  7. CANOE入门(一）

    CANoe是Vector公司的针对汽车电子行业的总线分析工具,现在我用CANoe7.6版本进行介绍,其他版本功能基本差不多. 硬件我使用的是CAN case XL. 1,CANoe软件的安装很简单,先 ...

  8. P3486 [POI2009]KON-Ticket Inspector

    啊!这题做的真是爽!除了DP这个方法是有提示的之外,这题居然没有题解,哈哈哈嘿嘿嘿.很自豪的说:全是我自己独立解出来的一道题,包括设计状态,推倒(☺)转移方程,最后记录路径. 好了,首先,我们发现这题 ...

  9. Django 模板 继承和包含

    ##### 母版 ##### 这里是头部 {% block body-content %}{% endblock %} 这里是底部 #### 继承模板 ### {% extends 'layout.h ...

  10. TensorFlow升级1.4：Cannot remove entries from nonexistent file \lib\site-pack

    https://blog.csdn.net/wishchin/article/details/78559313 https://blog.csdn.net/fool_frog/article/deta ...