HTML表格及列表用法

1.HTML 表格

HTML 表格由 <table> 标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

快捷键

快速生成表格结构：table>tr*n>td*n{单元格}
例：生成2*2表格

快捷效果：

效果：

表格属性

1. border:设置边框
2. width:设置宽度
3. height:设置高度
   实例

   <table border="1" width="200px" height="200px">
        <tr>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>

效果：

表格组成标签：
table+tr+td

表格合并：
水平合并：colspan=“n”,n表示合并的格数，保留左边，删除右边。
垂直合并：rowspan=“n”,n同上，保留上边，删除下边。
实例：

<table border="1" width="800px" height="800px">
        <tr>
            <td colspan="2">单元格1和2合并</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td>单元格6</td>
            <td>单元格7</td>
            <td>单元格8</td>
            <td>单元格9</td>
            <td rowspan="3">单元格10,15<br>,20合并</td>
        </tr>
        <tr>
            <td colspan="3">单元格11，12，13合并</td>
            <td>单元格14</td>

        </tr>
        <tr>
            <td>单元格16</td>
            <td>单元格17</td>
            <td>单元格18</td>
            <td>单元格19</td>

        </tr>
        <tr>
            <td>单元格21</td>
            <td>单元格22</td>
            <td>单元格23</td>
            <td>单元格24</td>
            <td>单元格25</td>
        </tr>
    </table>

效果：

2.列表

1.有序列表

有序列表是一列项目，列表项目使用数字进行标记。有序表始于<ol>标签。每个列表项始于<li>标签

快捷键

ol>li*n ,n为生成列表项数量

实例：

  <ol type="1">
        <li>好好学习</li>
        <li>天天向上</li>
        <li>成绩下降</li>
    </ol>

    <ol type="A">
        <li>好好学习</li>
        <li>天天向上</li>
        <li>成绩下降</li>
    </ol>

    <ol type="a">
        <li>好好学习</li>
        <li>天天向上</li>
        <li>成绩下降</li>
    </ol>

    <ol type="I">
        <li>好好学习</li>
        <li>天天向上</li>
        <li>成绩下降</li>
    </ol>

    <ol type="i">
        <li>好好学习</li>
        <li>天天向上</li>
        <li>成绩下降</li>
    </ol>

效果：

2.无序列表

无序列表是一个项目的列表，此列表项目使用粗体圆点进行标记
无序列表始于<ul>标签，每个列表项始于<li>标签。

常用场景

1. 无序的列表效果
2. 导航效果
   
   快捷键：
   ul>li*n

实例：

 <ul type="square">
        <li>好好学习</li>
        <li>天天向上</li>
        <li>学习下降</li>
    </ul>

    <ul type="circle">
        <li>好好学习</li>
        <li>天天向上</li>
        <li>学习下降</li>
    </ul>

    <ul type="disc">
        <li>好好学习</li>
        <li>天天向上</li>
        <li>学习下降</li>
    </ul>

    <ul type="none">
        <li>好好学习</li>
        <li>天天向上</li>
        <li>学习下降</li>
    </ul>

效果：

说明：
ul是unordered lists的缩写 (无序列表)

li是list item的缩写 （列表项目）

ol是ordered lists的缩写（有序列表）

dl是definition lists的英文缩写 (自定义列表)

dt是definition term的缩写 (自定义列表组)

dd是definition description的缩写（自定义列表描述）

nl是navigation lists的英文缩写 （导航列表）

tr是table row的缩写 （表格中的一行）

th是table header cell的缩写 （表格中的表头）

td是table data cell的缩写 （表格中的一个单元格）