h5中的表格

69 阅读 0 评论 46 点赞

我是靠谱客的博主能干枕头，最近开发中收集的这篇文章主要介绍h5中的表格，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

表格中的属性：

 <table border="5px"
         width="500px"
         height="100px"
         cellpadding ="10px "
         cellspacing="10px"
         align="center"
         bgcolor="gray"
         background="../star/little%20star/icon1.gif"
         bordercolor="red">

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

<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>

具体实例：

<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：

<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="范围"：

<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="范围"：

<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>