首页 > 程序开发 > web前端 > HTML/CSS >

HTML:GettingTabular

2017-08-21

HTML:GettingTabular。本章介绍如何用HTML的元素建立表格,语句如下:

本章介绍如何用HTML的元素建立表格,语句如下:

<table>
    <caption>
    </caption>
    <tr>
        <th>...</th>
            ...
    </tr>
    <tr>
        <td>...</td>
            ...
    </tr>
</table>
其中,tr表示table row,th表示table heading,td表示table data。
html只能按照row来录入数据;这里的第一行是heading,如果我们要让第一列是heading,只要在每一个row里面填入一个对应的th;

- 每一行的td要和th一样多,就算是缺失值也要用写入

<td></td>

border-spacing:
border-collapse : collapse可以使每个单元格间的边界消除

nth-child psuedo-class:
假设一个section里面有很多p

<section>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</section>

要使相邻行颜色不同

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

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

即奇数行使用红色背景色,偶数行使用绿色背景色。也可以用下面的代码:

p:nth-child(2n+1) {
    background-color: red;
}

p:nth-child(2n) {
    background-color: green;
}

但是这种用法不局限于奇偶行,还可以有更广泛的运用。

td元素里的参数rowspan/colspan可以控制单元格的合并

改变无序列表每一项前面的小黑圈,用喜欢的图片代替,需要用到CSS的list-style-image

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

有序列表无法使用图片,但是和无序列表一样可以用list-style-type来改变样式

相关文章
最新文章
热点推荐