h5中的表格

xiaoxiao2021-02-27  385

表格<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 star/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>

转载请注明原文地址: https://www.6miu.com/read-3346.html

最新回复(0)