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>
header1header2
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>
标题
header1header2
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>
NameSalary
小A1000
小G2000

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>
col1col2col3
(1,1)(1,2)(1,3)
(2,2)(2,3)
(3,1)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

[小G]

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值