七海的html和css学习笔记（十三）

第十三章 表格与更多列表

        用html创建一个表格

                创建一个表格需要用到四个元素：<table>、<tr>、<th>和<td>。下面将逐个地详细介绍这些元素，明确它们在表格中所起的作用：

<table>  //table标记开始整个表格。如果想要一个表格，都要从table开始
     <tr>   //每个tr元素指定一个表行。所以，放在一行中的所有表格数据都要嵌套在tr元素中
         <th>...</th>  //th元素包含表格表头中的一个单元格。它必须放在一个表行中
         <th>...</th>
     </tr>
     <tr>
         <td>...</td>  //td元素包含表格中的一个数据单元格。它必须嵌套在一个表行中
         <td>...</td>
     </tr>
</table>

                html的设计者决定按行指定表格，而不是按列来指定。不过，要注意，指定每一行的<td>元素时，隐含地就是在指定各列。

                如果一行中没有足够的元素，最容易的方法就是将数据单元格的内容留空。也就是说，要写为<td></td>。如果省去了这个数据单元格，表格就不能正确地排列对齐，所以要列出所有数据单元格，即使它们的内容为空。

                如果希望表格的表头放在表格的左侧，而不是放在上方，只需要把表头元素放在各行中，而不是都放在第一行中。如果你的<th>元素是各行中的第一项，那么第一列就会包含所有表格表头。

                html表格与css表格显示有什么关系：html表格允许你使用html标记指定表格的结构，而css表格显示则提供了一种方法，可以用一种类似表格的表现方式显示块级元素。可以这样来考虑，确实需要在页面中创建表格数据时，就是用html表格。不过，如果只需要对其他类型的内容使用一种类似表格的表现方式，就可以使用CSS表格显示布局。

                表格提供了一种在html中指定表格数据的方法。

                表格由行中的数据单元格组成。列隐含的定义在行中。

                表格中的列数就是行中数据单元格的个数。

                一般来讲，表格不用来提供表现，那是css的工作。

                可以使用<caption>元素来为表格指定标题：

<table>  //table标记开始整个表格。如果想要一个表格，都要从table开始
     <caption>
        //这里写表格的标题
     </caption>
     <tr>   //每个tr元素指定一个表行。所以，放在一行中的所有表格数据都要嵌套在tr元素中
         <th>...</th>  //th元素包含表格表头中的一个单元格。它必须放在一个表行中
         <th>...</th>
     </tr>
     <tr>
         <td>...</td>  //td元素包含表格中的一个数据单元格。它必须嵌套在一个表行中
         <td>...</td>
     </tr>
</table>

                标题会在浏览器中显示。默认地，大多数浏览器会把标题显示在表格上方。当然也可以使用css调整标题的位置：

table{
    caption-side: bottom;  //将标题移到表格的下方，注意这个属性实在<table>元素中设置的
}

                使用border-spacing属性来为表格中所有的数据项之间设置边距：

table{
     border-spacing:
     //将表格所有元素之间的边距设置为0像素，注意这个属性也是在<table>元素中设置的，因为是对表格所有的数据项之间进行的设置
}

                我们也可以为表格中数据项之间的垂直方向和水平方向之间设置不同的间距：

table{
     border-spacing: 10px 30px;
     //这会设置10像素的水平边框间距，30像素的垂直边框间距
}

                使用border-collapse属性来折叠边框：

table{
     border-collapse: collapse;
     //折叠表格内的边框
}

                

        nth-child伪类

                应该记得，伪类会根据元素的状态来指定元素的样式。对于nth-child伪类，状态则是一个元素相对于它的兄弟元素的数字顺序。下面通过一个例子来看这是什么意思：

<section>
    <p>..</p> //这是第一个子元素
    <p>..</p> //这是第二个子元素
    <p>..</p> //这是第三个子元素
    <p>..</p> //这是第四个子元素
</section>

                假如你想选择偶数段落（也就是第二段和第四段），让它们有一个红色背景，而奇数段落有一个绿色背景，可以这样做：

p:nth-child(even){
    background-color:red; //第2段和第4段有红色背景
}
p:nth-child(odd){
    background-color:green; //第1段和第3段有绿色背景
}

                从"nth-child（第几个子元素）"这个名字可以猜到，这个伪类不只是能选择嵌套在一个元素中的奇数和偶数，它还可以更灵活，可以使用数字n指定简单的表达式，从而在选择元素时有更多方式。例如，还可以像这样选择偶数和奇数段落：

p:nth-child(2n){
    background-color: red;
}
p:nth-child(2n+1){
    background-color:green;
}
//如果n=0，则2n=0（无段落）。2n+1为1，就是第一个段落。
//如果n=1，则2n=2，第2个段落，另外2n+1=3，就是第三个段落

        

        合并单元格

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

<tr>
    <td rowspan="2">...</td>
    <td>...</td>
    <td rowspan="2">...</td> //指示这个td元素中的内容要占两个单元格
    <td>...</td>
</tr>
<tr>
    <td>...</td>
    <td>...</td> //记得在对应的单元格中腾出位置给要占多个单元格的元素
</tr>

             表格数据也可以跨多列，只需要为<td>元素增加一个colspan属性，然后指定列数就可以了。与rowspan不同，跨多列时，需要删除同一行中的表格数据元素（因为现在所占的是多列，而不是多行）。

               同一个<td>中可以同时有colspan和rowspan，指示需要调整表格中的其他<td>，考虑到同时有跨行和跨列。换句话说，你需要从同一行和同一列上删除相应数目的<td>。

        嵌套表格

                

<table>
     <tr>
         <td>...</td>
         <td>  //在td中嵌套table，就可以实现表格的嵌套了
            <table>
                <tr>
                   <td>...</td>
                   <td>...</td>
                </tr>
            </table>
         </td>
     </tr>
</table>

        为列表增加一些样式

                我们已经知道，一旦掌握了基本的css字体、文本、颜色和其他属性，就可以对任何元素指定样式，也包括列表。你列表的主要属性是list-style-type，利用这个属性，可以控制列表中使用的项目符号（或者通常也叫作列表标记）。下面给出几种不同的列表标记：

li{
    list-style-type: disc; //disc是默认的小黑圆圈的列表标记
}
li{
    list-style-type: circle; //这个属性提供一个小空心圆的列表标记
}
li{
    list-style-type: square; //提供一个方块的列表标记
}
li{
    list-style-type: none; //值为none时，会删除所有列表标记
}

                也可以用list-style-image属性来自定义标记：

li{
    list-style-image: url(backpack.jpg); //使用url来定位要使用的自定义标记的位置
    padding-top: 5px;
    margin-left: 20px;
    //自定义标记可能会过大，所以可以设置边距来为自定义标记腾出足够的位置
}

               我们也可以改变有序列表的样式。不论是有序列表还是无序列表，指定样式的方法都是一样的。当然，有序列表会用一个数字或字母序列作为列表标记，而不是使用项目符号。利用css，你可以使用list-style-type属性控制一个有序列表的标记。常用的值包括：decimal（十进制数）、upper-alpha（大写字母）、lower-alpha（小写字母）、upper-roman（大写罗马数字）和lower-roman（小写罗马数字）。
                

                有一个名为list-style-position的属性。如果将这个属性标记为"inside"文本就会在标记下方环绕。如果设置为"outside"，就只在文本下回绕。

                inside和outside的具体含义是：如果把list-style-position设置为"inside"，标记就会在你的列表项里面，所以文本会在它下面回绕。如果这个属性设置为"outside"，说明标记在列表项外面，因此指示文本本身回绕。这里所说的"在列表项里面"是指在列表项盒子的边框里面。