（十三）表格与更多列表

1、用HTML创建一个表格

<table>标记开始整个表格。<th>元素包含表格表头中的一个单元格，它必须放在一个表行中。<td>元素包含表格中的一个数据单元格，它必须嵌套在一个表行中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        td,th {border:1px solid black;}
    </style>
    <title>Testing Tony's Travels</title>
</head> 
<body>
    <table>
        <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>June 15th</td>
            <td>75</td>
            <td>1,204 ft</td>
            <td>29,686</td>
            <td>4/5</td>
        </tr>
        <tr>
            <td>Magic City,ID</td>
            <td>June 25th</td>
            <td>74</td>
            <td>5,312 ft</td>
            <td>50</td>
            <td>3/5</td>
        </tr>
    </table>
</body>
</html>

2、为表格增加样式

caption-side属性指定标题在表格的位置。border-spacing属性指定边框间距，是针对整个表格定义的。border-collapse属性折叠边框，使单元格之间没有边框间距。

table {

　　　margin-left:20px;

     margin-right:20px;

     border:thin solid black;

     caption-side:bottom;

     border-collapse:collapse;

}

为各行指定交替颜色的方法：nth-child伪类，状态则是一个元素相对于它的兄弟元素的数字顺序。

tr:nth-child(even){ 
    background-color: red;
}

tr:nth-child(odd) { 
    background-color: green;
}

单元格跨多行，可以使用rowspan属性指定一个表格数据单元格占多少行，然后从这个单元格所跨越的其他行删除对应的表格数据元素。

单元格跨多列，可以使用colspan属性指定一个表格数据单元格占多少列，然后从这个单元格所跨越的同一行删除对应的表格数据元素。

<td rowspan="2"></td>

<td colspan="2"></td>

3、知识点

HTML表格用来建立表格数据结构。
HTML表格元素<table>、<tr>、<th>和<td>一起用来创建一个表格。
<table>元素定义并包围整个表格。
表格使用<tr>元素按行定义。
每行包含一个或多个数据单元格，分别用<td>元素定义。
使用<th>元素表示作为行或列表头的数据单元格。
表格采用格状布局。每行对应HTML中的一个<tr>......</tr>行，每列对应行中的<td>......</td>内容。
可以用<caption>元素提供关于表格的额外信息。
表格有边框间距，也就是单元格之间的间距。
表格数据单元格还可以有内边距和边框。
就像能够控制元素的内边距、边框和外边距一样，可以用CSS控制表格单元格的内边距、边距和边框间距。
border-collapse是针对表格的一个特殊的CSS属性，允许将单元格边框合并为一个边框，让外观更简洁。
可以用text-align和vertical-align CSS属性改变表格单元格中数据的对齐方式。
可以用background-color属性为表格增加颜色。可以为整个表格、各行或者单个的数据单元格增加背景颜色。
使用CSS nth-child伪类可以为表格隔行增加背景颜色。
如果一个数据单元格没有数据，<td>元素中不放置任何内容。不过，需要使用一个<td>......</td>元素维持表格的对齐。
如果你的数据单元格需要跨多行或多列，可以使用<td>元素的rowspan或colspan属性。
可以在表格中嵌套表格，将<table>元素及其所有内容放在一个数据单元格中。
表格应当于表示表格数据，而不是建立页面布局。另一方面，可以像第11章所介绍的，使用CSS表格显示创建多栏页面布局。
与所有其他元素一样，可以用CSS指定列表的样式。有几个特定于列表的CSS属性，如list-style-type和list-style-image。
list-style-type允许改变列表中使用的列表标记类型。
list-style-image允许指定列表标记图像。

posted @ 2017-03-27 16:39 gisercode 阅读(165) 评论(0) 收藏举报

刷新页面返回顶部

（十三）表格与更多列表

公告