HTML笔记 7.table表格

HTML 表格

表格元素	含义
table	HTML文档中的表格
tr	表格行
th	表头。（单元格中的标题元素），对单元格数据的说明
td	单元格

HTML中的表格基于行而不是列，每个行必须分别标记。
HTML5中，表格不应该，也不能用来处理页面布局。

示例代码：

<!--border 属性值必须设置为1，表格边框的粗细必须用CSS设置。-->
<table border="1">
    <tr>
        <th>表头标题一</th>
        <th>表头标题二</th>
    </tr>
    <tr>
        <td>第一行，第一列</td>
        <td>第一行，第二列</td>
    </tr>
    <tr>
        <td>第二行，第一列</td>
        <td>第二行，第二列</td>
    </tr>
</table>

表格中的表头 <th>

<h3>水平标题</h3>
<table border="1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>备注</th>
    </tr>
    <tr>
        <td>Andy</td>
        <td>man</td>
        <td>0510-8233</td>
    </tr>
</table>

<h3>垂直标题</h3>
<table border="1">
    <tr>
        <th>姓名</th>
        <td>Andy</td>
    </tr>
    <tr>
        <th>性别</th>
        <td>man</td>
    </tr>
    <tr>
        <th>电话</th>
        <td>0510-8233</td>
    </tr>
</table>

跨行或跨列的表格单元格

表格元素	含义
colspan	让一个单元格横跨多列
rowspan	让一个单元格纵跨多行

为colspan 和 rowspan 设置的值必须是整数。

<h3>单元格跨两格</h3>
<table border="1">
    <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>MicroSoft</td>
        <td>666</td>
    </tr>
</table>

<h3>单元格跨两列</h3>
<table border="1">
    <tr>
        <th>Name</th>
        <td>Andy</td>
    </tr>
    <tr>
        <th rowspan="2">Telephone</th>
        <td>Hello</td>
    </tr>
    <tr>
        <td>World</td>
    </tr>
</table>

表格内的标签

<table border="1">
    <tr>
        <td>
            <p>Stay Hungry</p>
            <p>Stay Foolish</p>
        </td>
        <td>
            这个单元格里包含一个表格
            <table border="1">
                <tr>
                    <td>A1</td>
                    <td>A2</td>
                </tr>
                <tr>
                    <td>B1</td>
                    <td>B2</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            这个单元格包含一个列表
            <ul>
                <li>Apple</li>
                <li>banana</li>
                <li>oranges</li>
            </ul>
        </td>
        <td>
            这个单元格里放一张图片😂😂😂
            <br />
            <img src="http://cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png">
        </td>
    </tr>
</table>

单元格边距

cellpadding属性设置的是单元格内的留白。

<h3>没有单元格边距</h3>
<table border="1">
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>


<h3>有单元格边距</h3>
<table border="1" cellpadding="10">
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

单元格间距

cellspacing 属性设置的是单元格之间的距离。

<h3>没有单元格间距</h3>
<table border="1">
    <tr>
        <td>111</td>
        <td>112</td>
    </tr>
    <tr>
        <td>1134</td>
        <td>1126</td>
    </tr>
</table>


<h3>单元格间距="0"</h3>
<table border="1" cellspacing="0">
    <tr>
        <td>111</td>
        <td>112</td>
    </tr>
    <tr>
        <td>1134</td>
        <td>1126</td>
    </tr>
</table>

<h3>单元格间距="10"</h3>
<table border="1" cellspacing="10">
    <tr>
        <td>111</td>
        <td>112</td>
    </tr>
    <tr>
        <td>1134</td>
        <td>1126</td>
    </tr>
</table>

caption、 thead、tfoot、tbody 元素 headers 属性

示例1.1

table.css 文件：

thead th,
tfoot th {
    text-align: left;
    background: grey;
    color: white;
}

tbody th {
    text-align: right;
    background: lightgrey;
    color: grey;
}
[colspan], [rowspan] {
    font-weight: bold;
    border: medium solid black;
}
thead [clospan], tfoot [colspan] {
    text-align: center;
}
caption {
    font-weight: bold;
    font-size: large;
    margin-bottom: 5px;
}

index.html 文件：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Example</title>
    <meta name="author" content="Andy">
    <meta name="description" content="A simple example of aside">
    <link rel="shortcut icon" type="image/x-icon" href="favico.ico">
    <link rel="stylesheet" href="table.css">
</head>

<body>
    <table>
        <!--caption元素可以用来为表格定义一个标题并将其与表格关联起来。-->
        <caption>Result of the 2011 Fruit Survey</caption>
        <!--thead元素，用来标记表格的标题行-->
        <thead>
            <tr>
                <th id="rank">Rank</th>
                <th id="name">Name</th>
                <th id="color">Color</th>
                <th id="sizeAndVotes" colspan="2">Size & Votes</th>
            </tr>
        </thead>
        <!--tfoot元素，用来标记组成表脚的行-->
        <tfoot>
            <tr>
                <th colspan="5"> & copy; 2011 Adam Freeman Fruit Data Enterprises</th>
            </tr>
        </tfoot>
        <!--tbody元素，构成表格主体的全体行-->
        <tbody>
            <tr>
                <!--td和th元素都定义了headers属性，它可以供屏幕阅读器和其他残障辅助技术用来简化对表格的处理。
                headers属性值可以被设置为一个或多个th单元格的id属性值。
                -->
                <th id="first" headers="rank">Favourite:</th>
                <td headers="name first">Apples</td>
                <td headers="color first">Green</td>
                <td headers="sizeAndVote">Medium</td>
                <td headers="sizeAndVote">500</td>
            </tr>
            <tr>
                <th id="second" headers="rank">2nd Favourite</th>
                <td headers="name second">Oranges</td>
                <td headers="color second">Orange</td>
                <td headers="sizeAndVote second">Large</td>
                <td headers="sizeAndVote second">450</td>
            </tr>
            <tr>
                <th id="third" headers="rank">3nd Favourite</th>
                <td headers="name third">Pomegranate</td>
                <td headers="color SizeAndVote" colspan="2" rowspan="2">
                    Pomegranates and cherries can both come in a range of colors
                </td>
                <td headers="sizeAndVote third">203</td>
            </tr>
            <tr>
                <th id="forth" headers="rank" rowspan="2">Joint 4th:</th>
                <td headers="name forth">Cherries</td>
                <td rowspan="2">75</td>
            </tr>
            <tr>
                <td headers="name">Pineapple</td>
                <td headers="color">Brown</td>
                <td headers="sizeAndVote">Very Large</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

处理列 —— colgroup、col

colgroup元素，该属性用来对表格中的列应用样式。

table.css 文件

    thead th,
    tfoot th {
        text-align: left;
        background: grey;
        color: white;
    }

    tbody th {
        text-align: right;
        background: lightgrey;
        color: grey;
    }

    [colspan],
    [rowspan] {
        font-weight: bold;
        border: medium solid black;
    }

    thead [colspan],
    tfoot [colspan] {
        text-align: center;
    }

    caption {
        font-weight: bold;
        font-size: large;
        margin-bottom: 5px;
    }

    #colgroup1 {
        background-color: red;
    }

    #colgroup2 {
        background-color: green;
        font-size: small;
    }

index.html 文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Example</title>
    <meta name="author" content="Andy">
    <meta name="description" content="A simple example of aside">
    <link rel="shortcut icon" type="image/x-icon" href="favico.ico">
    <link rel="stylesheet" href="table.css">
</head>

<body>
    <table>
        <!--表格标题-->
        <caption>Resutl of the 2011 Fruit Survey</caption>
        <!--对列进行处理,colgroup元素代表一组列，span元素表示colgroup元素负责的列数。-->
        <!--第一个colgroup负责表格中的前三列，另一个clogroup负责剩余两列。id属性值为选择器定义CSS样式。-->
        <colgroup id="colgroup1" span="3" />
        <colgroup id="colgroup2" span="2" />

        <!--表头-->
        <thead>
            <tr>
                <th>Rank</th>
                <th>Name</th>
                <th>Color</th>
                <th colspan="2">Size & Votes</th>
            </tr>
        </thead>
        <!--构成表格主体的全体行-->
        <tbody>
            <tr>
                <th>Favourite:</th>
                <td>Apples</td>
                <td>Green</td>
                <td>Medium</td>
                <td>500</td>
            </tr>
            <tr>
                <th>2th Favourite:</th>
                <td>Oranges</td>
                <td>Orange</td>
                <td>Large</td>
                <td>450</td>
            </tr>
            <tr>
                <th>3th Favourite:</th>
                <td>Pomegranates</td>
                <td colspan="2" rowspan="2">Pomegranates and cherries can both come in a range of colors and size.</td>
                <td>203</td>
            </tr>
            <tr>
                <th rowspan="2">Joint 4th</th>
                <td>cherries</td>
                <td rowspan="2">75</td>
            </tr>
            <tr>
                <td>Poneapple</td>
                <td>Brown</td>
                <td>Very Lareg</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <th colspan="5">& copy; 2011 Adam Freeman Fruit Data Enterprises</th>
            </tr>
        </tfoot>
    </table>
</body>

</html>

应用到<colgroup>元素上的样式在具体程度上低于直接应用到tr、td和th元素上的样式。
不规则单元格被记入其起始列。
<colgroup>元素的影响范围覆盖了列中所有的单元格。

表示个别的列 <col>

<col> 元素既能对一组列应用样式，也能对该组中个别的列应用样式。

table.css 文件

    thead th,
    tfoot th {
        text-align: left;
        background: grey;
        color: white;
    }

    tbody th {
        text-align: right;
        background: lightgrey;
        color: grey;
    }

    [colspan],
    [rowspan] {
        font-weight: bold;
        border: medium solid black;
    }

    thead [colspan],
    tfoot [colspan] {
        text-align: center;
    }

    caption {
        font-weight: bold;
        font-size: large;
        margin-bottom: 5px;
    }

    #colgroup1 {
        background-color: red;
    }

    #col3 {
        background-color: green;
        font-size: small;
    }

index.html 文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Example</title>
    <meta name="author" content="Andy">
    <meta name="description" content="A simple example of aside">
    <link rel="shortcut icon" type="image/x-icon" href="favico.ico">
    <link rel="stylesheet" href="table.css">
</head>

<body>
    <table>
        <!--表格标题-->
        <caption>Resutl of the 2011 Fruit Survey</caption>
        <!--对列进行处理,colgroup元素代表一组列，span元素表示colgroup元素负责的列数。-->
        <!--第一个colgroup负责表格中的前三列，另一个clogroup负责剩余两列。id属性值为选择器定义CSS样式。-->
        <colgroup id="colgroup1">
            <!--col中的span属性，让一个col元素代表几列，不用span属性的col元素只代表一列。-->
            <col id="col1And2" span="2" />
            <col id="col3" />
        </colgroup>
        <colgroup id="colgroup2" span="2"></colgroup>

        <!--表头-->
        <thead>
            <tr>
                <th>Rank</th>
                <th>Name</th>
                <th>Color</th>
                <th colspan="2">Size & Votes</th>
            </tr>
        </thead>
        <!--构成表格主体的全体行-->
        <tbody>
            <tr>
                <th>Favourite:</th>
                <td>Apples</td>
                <td>Green</td>
                <td>Medium</td>
                <td>500</td>
            </tr>
            <tr>
                <th>2th Favourite:</th>
                <td>Oranges</td>
                <td>Orange</td>
                <td>Large</td>
                <td>450</td>
            </tr>
            <tr>
                <th>3th Favourite:</th>
                <td>Pomegranates</td>
                <td colspan="2" rowspan="2">Pomegranates and cherries can both come in a range of colors and size.</td>
                <td>203</td>
            </tr>
            <tr>
                <th rowspan="2">Joint 4th</th>
                <td>cherries</td>
                <td rowspan="2">75</td>
            </tr>
            <tr>
                <td>Poneapple</td>
                <td>Brown</td>
                <td>Very Lareg</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <th colspan="5">& copy; 2011 Adam Freeman Fruit Data Enterprises</th>
            </tr>
        </tfoot>
    </table>
</body>

</html>

1.6.png

设置表格边框——border属性

border属性告诉浏览器这个表格是用来表示表格式数据而不是用来布置其他元素的。border属性的值必须设置为1或空字符串（“”）。

<body>
    <table border="1">
        <!--...-->
    </table>
</body>

Head First HTML 示例

源码：http://www.headfirstlabs.com/books/hfhtml/chapter13/completedjournal/journal.html

<!--
    表格提供了一种在HTML中定义表格式数据的方法。
    表格由行（tr）中的数据单元（td）组成。
    表格中列的个数，取决于一行中数据单元格（td）的个数。
    表格的作用不在于外观，外观是CSS的工作。
    td：border|padding|单元格内容|padding|border|border-spacing|border|padding|单元格内容|padding...
    border-collapse:collapse; // 消除边框间距
-->
<!--summary属性，摘要，增加表格的可读性，使屏幕读取器更好的读取用户所描述的表格。-->
<table summary="This table holds data about the
       cities I visited on my travels. I've included the date
       I was in each city, the temperature when I was there,
       and altitude and population of each city. I've also
       included a rating of the diners where I had lunch, on a
       scale from 1 to 5.">
    <!-- caption，表格标题-->
    <caption>
        The cities I visited on my Segway'n USA travels
    </caption>
    <tr>
        <th>City</th>
        <th>Date</th>
        <th>Temperature</th>
        <th>Altitude</th>
        <th>Population</th>
        <th>Diner Rating</th>
    </tr>
    <tr>
        <td>Walla Walla, WA</td>
        <td class="center">June 15th</td>
        <td class="center">75</td>
        <td class="right">1,204 ft</td>
        <td class="right">29,686</td>
        <td class="center">4/5</td>
    </tr>
    <tr class="cellcolor">
        <td>Magic City, ID</td>
        <td class="center">June 25th</td>
        <td class="center">74</td>
        <td class="right">5,312 ft</td>
        <td class="right">50</td>
        <td class="center">3/5</td>
    </tr>
    <tr>
        <td>Bountiful, UT</td>
        <td class="center">July 10th</td>
        <td class="center">91</td>
        <td class="right">4,226 ft</td>
        <td class="right">41,173</td>
        <td class="center">4/5</td>
    </tr>
    <tr class="cellcolor">
        <td>Last Chance, CO</td>
        <td class="center">July 23rd</td>
        <td class="center">102</td>
        <td class="right">4,780 ft</td>
        <td class="right">265</td>
        <td class="center">3/5</td>
    </tr>
    <tr>
        <td rowspan="2">Truth or Consequences, NM</td>
        <td class="center">August 9th</td>
        <td class="center">93</td>
        <td rowspan="2" class="right">4,242 ft</td>
        <td rowspan="2" class="right">7,289</td>
        <td class="center">5/5</td>
    </tr>
    <tr>
        <td class="center">August 27th</td>
        <td class="center">98</td>
        <td class="center">
            <table>
                <tr>
                    <th>Tess</th>
                    <td>5/5</td>
                </tr>
                <tr>
                    <th>Tony</th>
                    <td>4/5</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr class="cellcolor">
        <td>Why, AZ</td>
        <td class="center">August 18th</td>
        <td class="center">104</td>
        <td class="right">860 ft</td>
        <td class="right">480</td>
        <td class="center">3/5</td>
    </tr>
</table>

css示例：

table {
  margin-left:      20px;
  margin-right:     20px;
  border:           thin solid black;
  caption-side:     bottom;   // 将标题移动到表格的底部
  border-collapse:  collapse; // 消除边框之间的距离
}

td, th {
  border:           thin dotted gray;
  padding:          5px; // 单元格补白，单元格内容与边框之间的空隙
}

th {
  background-color: #cc6600;
}

caption {
  font-style:       italic; // 字体样式为斜体
  padding-top:      8px;    // 标题顶部添加补白
}

.center {
  text-align:       center;
}

.right {
  text-align:       right;
}

.cellcolor {
  background-color: #fcba7a;
}

table table th {
  background-color: white;
}

li {
  list-style-image: url(images/backpack.gif);
  padding-top:      5px;
  margin-left:      10px;
}

其他表格相关的CSS属性

属性	说明	值
border-collapse	设置相邻单元格的边框处理样式	collapse/separate
border-spacing	设置相邻单元格边框的间距	1～2个长度值
caption-side	设置表格标题的位置	top/bottom
empty-cells	设置空单元格是否显示边框	hide/show
table-layout	指定表格的布局样式	auto/fixed

最后编辑于：2019.05.23 15:49:28

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,445评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,889评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,047评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,760评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,745评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,638评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,011评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,669评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,923评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,655评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,740评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,406评论 4赞 320
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,995评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,961评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,197评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,023评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,483评论 2赞 342