表格 - 信息表格显示

282 阅读1分钟

table 基本結構

    <table><!-- table 创建表格  -->
        <tr><!-- tr 表示行 -->
            <td>1</td> <!-- td 表示单元格 -->
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

table 基本属性

<table width="600px" height="200px" border="1" bordercolor="white" bgcolor="#FBEAFF" align="center"
    cellspacing="0" cellpadding="5px">
    <tr height="40px" align="center" valign="middle">
        <td width="100px" bgcolor="#B39CD0">会员姓名</td>
        <td width="100px" bgcolor="#00C9A7" colspan="2">James</td>
        <td width="100px" bgcolor="#B39CD0">出生日期</td>
        <td width="100px" bgcolor="#00C9A7" colspan="2">2002/2/2</td>
    </tr>
    <tr height="40px" align="center" valign="middle">
        <td bgcolor="#845EC2">身份证号</td>
        <td colspan="5" align="left">35164120020202224X</td>
    </tr>
    <tr height="40px" align="center" valign="middle">
        <td bgcolor="#845EC2">通信地址</td>
        <td colspan="5" align="left">Wash Streat No.2</td>
    </tr>
    <tr height="40px" align="center" valign="middle">
        <td bgcolor="#845EC2">联系电话</td>
        <td colspan="5" align="left">256-85410</td>
    </tr>
    <tr bgcolor="#B39CD0" align="left" valign="middle">
        <td colspan="5">最终解释权:由会员制度进行解释,其余内容均参考本卡制度规定。</td>
        <td bgcolor="#00C9A7" align="center">Sign Area_______</td>
    </tr>
</table>
<!--[table 表格属性]
    1. 宽度     width
    2. 高度     height
    3. 边框     border
    4. 边框颜色 bordercolor
    5. 背景颜色 bgcolor
    6. 整表对齐 align="left|center|right"
    7. 单元格与单元格间距 cellspacing="<number>"
    8. 单元格与内容的空隙 cellpadding="<number>"
-->

<!--[tr 表格行(table row)属性]
    1. 高度 height
    2. 背景颜色 bgcolor
    3. 水平对齐 align="left|center|right"
    4. 垂直对齐 valign="top|middle|bottom"
-->

<!--[td 表格数据(table data 单元格)属性]
    1. 宽度 width,如果一个单元格设置了宽度width,影响的是是这一整列的宽度
    2. 高度 height,如果一个单元格设置了高度height,影响的是是这一整行的宽度
    3. 背景颜色 bgcolor
    4. 水平对齐 align="left|center|right"
    5. 垂直对齐 valign="top|middle|bottom"
    6. 合并列 colspan="<number>"
    7. 合并行 rowspan="<number>"
-->

表格实例.png