前端入门学习笔记（四）HTML基础（三） 列表、表格

列表

无序列表

创建无序列表，要使用 <ul> 标签，其中每个列表项由 <li> 标签表示。

 <ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
 </ul>

• HTML
• CSS
• JavaScript

有序列表

既然有无序列表那自然有有序列表，有序列表要用<ol>作为标签，列表项目仍由<li> 标签表示。

<ol>
 <li>咖啡</li>
 <li>茶</li>
 <li>牛奶</li>
</ol>

1. 咖啡
2. 茶
3. 牛奶

表格

基本属性

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

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。表头用 <th>定义，大多数浏览器将表头显示为粗体居中的文本。

下面是一个包含两行两列的表格：

<table border="1"><!--此处border为设置表格边框-->
    <tr>
        <th>表头一</th>
        <th>表头二</th>
    </tr>
    <tr><!-- 一个tr一行 -->
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
</table>

表头一	表头二
第一行第一列	第一行第二列
第二行第一列	第二行第二列	第二行第三列

colspan 和 rowspan 属性

colspan 定义跨列表格， rowspan 定义跨行的表格。定义较难理解还是直接贴出实例

<table border="1">
    <tr>
        <th>表头一</th>
        <th colspan="2">表头二</th><!--表头二设置为2，则跨2列-->
    </tr>
    <tr><!-- 一个tr一行 -->
        <td rowspan="10">第一行第一列</td><!--设置为10,则跨10行-->
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
</table>

表头一	表头二
第一行第一列	第一行第二列
	第二行第一列	第二行第二列	第二行第三列

表头二 colspan 赋值为 2，则表头儿跨二列。
第一行第一列 rowspan 赋值为 10，它可跨10行，但是由于表格大小的限制，他只能跨2行。

大家应该有注意到，第一行第二列这单元格右边全为空，使得表格十分难看，可以使用<td></td>来填充，从而维持表格的结构