HTML表格标记教程(1):制作表格

让我为你详细讲解“HTML表格标记教程(1):制作表格”的完整攻略。

1. 制作表格的基本结构

HTML表格通常由<table>、<tr>和<td>标签组成，其中：

• <table>标签定义表格，所有表格元素都必须放在<table>标签中
• <tr>标签用于定义表格中的行
• <td>标签则用于定义表格中的单元格

示例代码如下：

<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

以上代码定义了一个包含两行两列的表格。

2. 表格的属性设置

表格中的元素可以通过设置属性来控制其样式和行为，常用的属性包括：

• border：设置表格边框的宽度
• cellpadding：设置单元格内容与单元格边缘之间的距离
• cellspacing：设置单元格之间的间隔
• colspan：指定单元格横跨的列数
• rowspan：指定单元格纵跨的行数

示例代码如下：

<table border="1" cellpadding="10" cellspacing="0">
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td colspan="2">第二行</td>
  </tr>
  <tr>
    <td rowspan="2">第三行第一列</td>
    <td>第三行第二列</td>
  </tr>
  <tr>
    <td>第四行第二列</td>
  </tr>
</table>

以上代码定义了一个带边框、单元格padding为10px、单元格间隔为0的表格，其中第二行跨越两列，第三行的第一列跨越两行。

3. 示例说明

示例1：学生成绩表格

下面是一个简单的学生成绩表格示例。

<table border="1" cellspacing="0" cellpadding="5">
  <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>英语</th>
    <th>总分</th>
  </tr>
  <tr>
    <td>01</td>
    <td>张三</td>
    <td>90</td>
    <td>85</td>
    <td>92</td>
    <td>267</td>
  </tr>
  <tr>
    <td>02</td>
    <td>李四</td>
    <td>75</td>
    <td>80</td>
    <td>88</td>
    <td>243</td>
  </tr>
  <tr>
    <td>03</td>
    <td>王五</td>
    <td>80</td>
    <td>90</td>
    <td>90</td>
    <td>260</td>
  </tr>
</table>

以上代码定义了一个有边框、单元格padding为5px的表格，其中第一行为表头，使用<th>标签定义，第二至四行为学生的成绩信息，使用<td>标签定义。

示例2：日历表格

下面是一个简单的日历表格示例。

<table border="1" cellspacing="0" cellpadding="5">
  <tr>
    <th colspan="7">2021年6月</th>
  </tr>
  <tr>
    <th>星期日</th>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
    <th>星期四</th>
    <th>星期五</th>
    <th>星期六</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td>1</td>
    <td>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>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
  </tr>
  <tr>
    <td>20</td>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
  </tr>
  <tr>
    <td>27</td>
    <td>28</td>
    <td>29</td>
    <td>30</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

以上代码定义了一个有边框、单元格padding为5px的表格，其中第一行为标题，跨越了七列，第二行用于给每列定义一个星期几，接下来的几行为具体的日期信息。注意，最后一行的最后三列没有填充日期，可使用<td></td>占位，保证表格的完整性。

通过以上两个示例，我们可以了解到如何使用HTML标签来创建不同形式的表格，并通过属性设置来控制表格的样式和行为。