h5中的表格

92 阅读 0 评论 61 点赞

我是靠谱客的博主能干枕头，这篇文章主要介绍h5中的表格，现在分享给大家，希望可以做个参考。

表格<table> 行<tr> 列<td>..</td> </tr> </table>：

注意：每一行里td的个数一样。

表格中的属性：

复制代码

1
2
3
4
5
6
7
8
9
 <table border="5px"
         width="500px"
         height="100px"
         cellpadding ="10px "
         cellspacing="10px"
         align="center"
         bgcolor="gray"
         background="../star/little%20star/icon1.gif"
         bordercolor="red">

单元格与边框的距离变宽
cellpadding内容与单元格变宽
代码显示：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<table border="2px">
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>数学成绩</td>
        <td>语文成绩</td>
        <td>英语成绩</td>
    </tr>
    <tr>
        <td>1001</td>
        <td>张三</td>
        <td>100分</td>
        <td>120分</td>
        <td>120分</td>
    </tr>
    <tr>
        <td>1002</td>
        <td>李四</td>
        <td>110分</td>
        <td>123分</td>
        <td>124分</td>
    </tr>
    <tr>
        <td>1003</td>
        <td>王五</td>
        <td>150分</td>
        <td>120分</td>
        <td>120分</td>
    </tr>
</table>

具体实例：

复制代码

<tr>
        <td align="center">
            第一行第一列</td>
        <td align="center">
            第二行第二列</td>
    </tr>
</table>
<table cellspacing="4px"
       align="center"
       border="2px"
       height="150px"
       width="400px">
    <tr>
        <td align="center">
            表头一</td>
        <td align="center">表头二</td>
    </tr>

<tr>
        <td align="center">
            第一行第一列</td>
        <td align="center">
            第二行第二列</td>
    </tr>
</table>
<table cellspacing="4px"
       align="right"
       border="2px"
       height="150px"
       width="400px">
    <tr>
        <td align="center">
            表头一</td>
        <td align="center">表头二</td>
    </tr>

<tr>
        <td align="center">
            第一行第一列</td>
        <td align="center">
            第二行第二列</td>
    </tr>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<table   border="5px"
        bordercolor="red"
         cellpadding="50px"
        >
    <tr bgcolor="green">

        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr bgcolor="green">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<table cellspacing="4px"
        align="leftbottom"
        border="2px"
        height="150px"
        width="400px">
    <tr>
        <td align="center">
            表头一</td>
        <td align="center">表头二</td>
    </tr>

    <tr>
        <td align="center">
            第一行第一列</td>
        <td align="center">
            第二行第二列</td>
    </tr>
</table>
<table cellspacing="4px"
       align="center"
       border="2px"
       height="150px"
       width="400px">
    <tr>
        <td align="center">
            表头一</td>
        <td align="center">表头二</td>
    </tr>

    <tr>
        <td align="center">
            第一行第一列</td>
        <td align="center">
            第二行第二列</td>
    </tr>
</table>
<table cellspacing="4px"
       align="right"
       border="2px"
       height="150px"
       width="400px">
    <tr>
        <td align="center">
            表头一</td>
        <td align="center">表头二</td>
    </tr>

    <tr>
        <td align="center">
            第一行第一列</td>
        <td align="center">
            第二行第二列</td>
    </tr>
</table>

还可以对tr td单独使用标签属性其中行的对齐方式垂直方向valign：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table width="350px"
       height="250px"
       border="2px">
    <tr bgcolor="yellow"
        height="100px">
        <td>第一行第一列</td>
        <td>第一行第二列</td>
        <td>第一行第三列</td>
    </tr>
    <tr  bgcolor="blue">
        <td>第二行第一列</td>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
</table>

合并行和列-- 合并列：colspan="范围"：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table width="400px"
       height="100px"
        border="2px">
    <tr>
    <td colspan="2">成绩表</td>

</tr>
    <tr>
        <td>语文</td>
        <td>98</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

合并行：rowspan="范围"：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<table width="400px"
        height="300px"
        border="1px">
    <tr>
        <td colspan="3">商品类目</td>

    </tr>
    <tr>
        <td rowspan="3">虚拟</td>
        <td>移动</td>
        <td>联通</td>
    </tr>
    <tr>
    <td>充值卡</td>
    <td>彩票</td>
</tr>
    <tr>
    <td>梦幻</td>
    <td>QQ</td>
</tr>
    <tr>
        <td rowspan="3">护肤</td>
        <td>美容护肤</td>
        <td>美体</td>

    </tr>
    <tr>

        <td>彩妆</td>
        <td>香水</td>

    </tr>
    <tr>

    <td>个人护理</td>
    <td>保健</td>
</tr>
</table>