HTML-表单table

table

HMTL有专门负责表格的元素，table。创建一个表格要使用四个元素：<table>,<tr>,<th>,<td>。

格式如下：

<table>
    <caption>The table</caption> /*表单标题，默认显示上方*/
    <tr> ／*行*／
        <th>City</th> ／*表头*／
        <th>Date</th>
        <th>Temperature</th>
    </tr>
    <tr>
        <td>Walla</td> ／*表格数据*／
        <td>June 15th</td>
        <td>75</td>
    </tr>
    <tr>
        <td>Magic</td>
        <td>June 26th</td>
        <td>50</td>
    </tr>
</table>

表格如下：

The table

City	Date	Temperature
Walla	June 15th	75
Magic	June 26th	50

注意：

• 对于没有内容的表格数据，不能省略，应写成<td></td>。
• 表头不仅仅可以放在表格上侧，也可以置于表格左侧，决定于<th>位置。
• 表格可以进行嵌套。

常用格式：

table {
    caption-side: bottom; /*标题显示位置*/
    border-spacing: 20px 40px; /*表格数据间距，行间距，列间距*/
    /*border-collapse: collapse; /*两个相邻表格的边框重合*/*/
}

caption {
    font-family: sans-serif;
    padding-top: 8px;
}

th {
    text-align: center;
}

注意：

• border-spacing: 0px; border-collapse: collapse区别
  前者设置边距为0，但是相邻两个单元格的边框都在，只是没有间距。
  后者设置为边框重叠，相邻两个单元格的边框只显示一个边框的宽度。

• 间隔设置行背景色方法
  添加新的分类，为需要行加入分类。
  使用伪类，选择奇数偶数子元素。tr:nth-child(odd)或者tr:nth-child(2n+1)

• 单元格跨行
  使用rowspan和colspan属性可以进行跨行和跨列。
  按照表格顺序，将需要td指定跨行属性，对于下一行被占用td进行删除。
  格式：

<table>
    <caption>The table</caption> /*表单标题，默认显示上方*/
    <tr> ／*行*／
        <th>City</th> ／*表头*／
        <th>Date</th>
        <th>Temperature</th>
    </tr>
    <tr>
        <td>Walla</td> ／*表格数据*／
        <td>June 15th</td>
        <td rowspan="2" >75</td>
    </tr>
    <tr>
        <td>Magic</td>
        <td>June 26th</td>
    </tr>
    <tr>
        <td>Bountiful</td>
        <td>June 28th</td>
        <td>80</td>
    </tr>
</table>

The table

City	Date	Temperature
Walla	June 15th	75
Magic	June 26th
Bountiful	June 28th	80