HTML语言基础（七）——表格基础

33、表格 <table> <tr> <td>

table的属性

• border：在HTML 4.01 中，border表示表格边框的宽度。在 HTML5 中，border 属性仅用于指示表格是否用于布局目的，且只允许属性值 "" 或 "1"。

<tr>定义表格中的行，tr的属性：

• align定义表格中的行
  ：规定表格行中内容的水平对齐方式。
  属性值有：left、right、center、justify、char
• valign：规定表格行中内容的垂直对齐方式。
  属性值有：top、middle、bottom、baseline

<td> 定义表格中的单元格，td的属性：

• align：规定单元格内容的水平对齐方式。
  属性值有：left、right、center、justify、char
• valign：规定单元格内容的垂直排列方式。
  属性值有：top、middle、bottom、baseline
• colspan：规定此单元格的列数。
• rowspan：规定此单元格可横跨的行数。

编写一个最简单：可横跨

<table border="1">
  <tr>
    <td>A1</td>
    <td>A2</td>
    <td>A3</td>
  </tr>
  <tr>
    <td>B1</td>
    <td>B2</td>
    <td>B3</td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
    <td>C3</td>
  </tr>
</table>

其中border决定边框的宽度，例如，
border=1和border=5的情况分别如下：

<td>中运用rowspan和colspan可横跨行和列，常用于课程表以及行程表等的设计中，例：

<table border="1">
  <tr>
    <td colspan = "2">A1</td>
    <td>A2</td>
  </tr>
  <tr>
    <td colspan = "2">B1</td>
    <td>B2</td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
    <td rowspan = "3">C3</td>
  </tr>
  <tr>
    <td>D1</td>
    <td>D2</td>
  </tr>
  <tr>
    <td>E1</td>
    <td>E2</td>
  </tr>

可从显示的表格中得知，A1和B1的td中填写colspan="2"，故显示时A1和B1的单元格都占据了两列的位置，且他们所在的行内只存在两个元素。
C3的td中填写了rowspan="3"，故单元格占据了三行的位置。

由此可知，若要占据行/列多少位置，就应在rowspan/colspan后填写相应的数字。

34、表格中的<th> <caption>标签

<th> 定义表格中的表头单元格。
th基本和td一样。

• th元素中的文本呈现为粗体并且居中。
• td元素中的文本是普通的左对齐文本

<caption> 定义表格的标题。

• 必须直接放置到 table 标签之后。每个表格只能规定一个标题。通常标题会居中显示在表格上方。

<table border="1">
  <caption>test</caption>
  <tr>
    <th colspan = "2">A1</td>
    <td>A2</td>
  </tr>
  <tr>
    <td colspan = "2">B1</td>
    <td>B2</td>
  </tr>
  <tr>
    <td >B1</td>
    <td>B2</td>
    <td>B2</td>
  </tr>

A1为<th>，B1为 <td>，“test”为caption标题