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