9-html表格

HTML 表格

表格由 table 标签定义，每个表格有若干行(由 <tr> 标签定义)，每行由若干单元格(由<td>标签定义)组成。

单元格内可以包含文本，图片、列表、段落、表单、水平线、表格等。

1. html表格基本形式

<table></table> :定义表格
<th></th>: 定义表格标题栏(字体加粗)
<tr></tr>: 定义表格的行
<td></td>: 定义表格的列

例如：

<table border="1">
    <tr>
        <td> row 1, cell 1 </td>
        <td> row 1, cell 2 </td>
    </tr>
    <tr>
        <td> row 2, cell 1 </td>
        <td> row 2, cell 2 </td>
    </tr>
</table>

效果如下：

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

上面这个例子中在<table>标签里还使用了表格的边框border属性,另外还可以设置高度 height和宽度width属性

2. 表头单元格 <th> 标签

表头单元格属性主要使用一些公共属性，如：align, dir, width, height。
大多数浏览器会把表头显示为粗体居中的格式

<table border="2">
    <th>header1</th>
    <th>header2</th>
    <tr>
        <td> row 1, cell 1 </td>
        <td> row 1, cell 2 </td>
    </tr>
    <tr>
        <td> row 2, cell 1 </td>
        <td> row 2, cell 2 </td>
    </tr>
</table>

header1	header2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

3. 表格标题

使用 <caption> 来定义表格标题，并在表的顶部显示出来：

<table border="2">
    <caption>标题</caption>

    <th>header1</th>
    <th>header2</th>
    <tr>
        <td> row 1, cell 1 </td>
        <td> row 1, cell 2 </td>
    </tr>
    <tr>
        <td> row 2, cell 1 </td>
        <td> row 2, cell 2 </td>
    </tr>
</table>

标题

header1	header2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

4. 表格背景

可以用以下几个方法设置表格背景：

• bgcolor:可以为整个表格或者单个单元格设置背景色。
• background:为整个表格或单元格设置背景图像，需要提供图像 url 地址，如：background = "/imgs/test.png"
• bordercolor: 设置表格边框颜色

5. 表格空间

• cellspacing 属性定义表格单元格之间的空间
• cellpadding 属性表示单元格边框与格子内部内容之间的距离

<table border="1" cellpadding="5" cellspacing="5" >
    <tr>
        <th>Name</th>
        <th>Salary</th>
    </tr>
    <tr>
        <td>小A</td>
        <td>1000</td>
    </tr>
    <tr>
        <td>小G</td>
        <td>2000</td>
    </tr>
</table>

Name	Salary
小A	1000
小G	2000

6. 合并单元格

• 将多列合并为一列，用 colspan 属性
• 将多行合并为一行，用 rowspan 属性

<table>
    <tr>
        <th>col1</th>
        <th>col2</th>
        <th>col3</th>
    <tr>
    <tr>
        <td rowspan="3">(1,1)<td>
        <td>(1,2)</td>
        <td>(1,3)</td>
    <tr>
    <tr>
        <td>(2,2)</td>
        <td>(2,3)</td>
    </tr>
    <tr>
        <td colspan="3">(3,1)</td>
    </tr>
</table>

col1	col2	col3
(1,1)	(1,2)	(1,3)
	(2,2)	(2,3)
(3,1)