HTML表格与列表

浏览数：32 / 时间：2015年06月09日

HTML表格

表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些很多行列组成的东西，就叫表格，表格是<table>标签来定义的。而<table>标签中的行就是<tr>标签，而列就是<td>标签，必须先定义行才能定义列。因为html中，每一列是在一行当中的。

下表总结了一些常用的标签：

表格	描述
<table>	定义表格
<caption>	定义表格标题
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格的单元
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚
<col>	定义表格的列属性

先定义一个简单的表：

运行后可以看到

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <table border="1">
            <tr>
                <td>水果</td>
                <td>水果</td>
                <td>水果</td>
            </tr>
    <!-- 下面将td与tr反正写了，是不会构成表的 -->
            <td>
                <tr>asd</tr>
                <tr>asd</tr>
                <tr>asd</tr>
                <tr>asd</tr>
            </td>
        </table>
    </body>
</html>

可以看到，上面注释下面的<td>与<tr>反正写了。会出现一个很细小的表格，但是<tr>中写的文字，是不会显示上去的

所以html中，编写表格是要一行一行的写。<tr>标签中包含<td>

没有边框的表格

没有边框的表格，其实就是在<table>标签中，不加属性border。border这个属性是代表表格的边框。如果不加属性的话，默认border="0" ，但是没有边框有的时候你就看不出来它是一张表格了。所以有的时候会给border="1px"设置1像素的边框。暂时去掉border属性，完成一张没有边框的表格

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <table>
            <tr>
                <td>呵呵</td>
                <td>哈哈</td>
                <td>嘻嘻</td>
            </tr>
            <tr>
                <td>嘿嘿</td>
                <td>嘎嘎</td>
                <td>噗噗</td>
            </tr>
            <tr>
                <td>啊啊</td>
                <td>哦哦</td>
                <td>噢噢</td>
            </tr>

        </table>
    </body>
</html>

表格中的表头 <tr><th>我是表头</th></tr>

还可以给表添加表头，使用<th>标签，<th>标签也是在<tr>标签中的，我们为了好看，还是把border加上：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <table border="1">
            <tr>
                <th>人物</th>
                <th>介绍</th>
                <th>产品</th>
            </tr>
            <tr>
                <td>史蒂夫·保罗·乔布斯</td>
                <td>苹果CEO</td>
                <td>Apple系列</td>
            </tr>
            <tr>
                <td>丹尼斯·里奇</td>
                <td>C语言之父</td>
                <td>C语言</td>
            </tr>
            <tr>
                <td>比尔·盖茨</td>
                <td>微软CEO</td>
                <td>Windows系统</td>
            </tr>

        </table>
    </body>
</html>

还可以设置表格内的边距 cellpadding 属性
也可以设置单元格边距 cellspacing 属性

<table border="1" cellpadding="10" cellspacing="10">
    <tr>
        <td>xxx</td>
    </tr>
</table>

带有标题的表格 <caption>

<table border="1" cellpadding="10" cellspacing="10">
            <caption>xxx表</caption>
            <tr>
                <td>xxx</td>
            </tr>
</table>

表格内的颜色bgcolor属性

<table border="1" bgcolor="red">
    <tr>
        <td>xxx</td>
    </tr>
</table>

单元格内容排列 align 属性分别有center、left、right

<table border="1" align="center">
    <caption>xxx表</caption>
    <tr>
        <td>xxx</td>
    </tr>
</table>

跨行和跨列的单元格 colspan属性，准确的来说，就是合并单元格

<table border="1">
    <caption>xxx表</caption>
    <tr>
        <td colspan="2">xxx</td>
        <td>xxx</td>
    </tr>
    <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
    </tr>
</table>

HTML列表

列表就是像word里面的标题一样，顺着往下数的标题。

下标是一些控制标题的标签

标签	描述
<ol>	有序列表
<ul>	无序列表
<li>	列表项
<dl>	列表
<dt>	列表项
<dd>	描述

这些列表还分有序列表，无序列表和自定义列表。

无序列表

属性：disc：实体圆、circle：空心圆、square：实体方块

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
    <!-- 无序列表默认属性是disc，disc定义一个实体圆，所以disc不用刻意去设置 -->
        <ul>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ul>
    <!-- 这些属性都是通过type来定义的，circle是定义一个空心圆 -->
        <ul type="circle">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ul>
    <!-- square定义实体方块 -->
        <ul type="square">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ul>
    </body>
</html>

有序列表

属性：A、a、l、i、start

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
    <!-- 有序列表默认是数字往下计数的 -->
        <ol>
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    <!-- 定义A，就是按照大写字母来计数的，当然了，不能直接定义B，它不是不会从B开始数的 -->
        <ol type="A">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    <!-- 定义a，就是安装小写字母开始计数的 -->
        <ol type="a">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    <!-- 定义I，就是按照大写罗马数字计数的 -->
        <ol type="I">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    <!-- 定义i，就是按照大写罗马数字计数的 -->
        <ol type="i">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    <!-- start属性，就是按照从多少数来计数，比如我想从3开始计数。start属性只能定义数字，不支持英文字母哦。 -->
        <ol start="3">
            <li>我是第一个</li>
            <li>我是第二个</li>
            <li>我是第三个</li>
        </ol>
    </body>
</html>

嵌套列表

嵌套列表就是有序列表套无序列表，无序套有序的呗。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <ol>
            <li>人物</li>
            <ul>
                <li>斯蒂芬·保罗·乔布斯</li>
                <li>丹尼斯·里奇</li>
                <li>比尔·盖茨</li>
            </ul>
            
            <li>动物</li>
            <ul>
                <li>猫</li>
                <li>狗</li>
                <li>熊</li>
            </ul>
        </ol>
            
    </body>
</html>

自定义列表

自定义的列表，就是没有有序、无序的点。后期可以用CSS样式来加工修改。也是比较常用的操作

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body>
        <dl>
            <li>我是标题</li>
            <dt>
                <dd>我是正文，我必须长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</dd>
            </dt>
        </dl>
            
    </body>
</html>