美文网首页Web前端之路
网页设计:HTML表格标签

网页设计:HTML表格标签

作者: 前小小 | 来源:发表于2020-12-07 22:17 被阅读0次

    表格组成:

    • table 表格容器(外框)
    • <caption>:定义表格的标题;
    • <th></th>:定义一个表格头;
    • <tr></tr> :定义一个表格行;
    • <td></td> :定义一个单元格;

    标签属性:

    1)table(表)常用属性:

    • border:边框粗细
    • height:高度
    • width:宽度
    • bgcolor:背景颜色
    • background:背景图片
    • cellspacing:单元格到单元格之间的距离
    • cellpadding:单元格内容到单元格之间的距离
    • align:表格在网页摆放位置
      值:
      left:左对齐
      right:右对齐
      center:居中对齐
    <table border=" 值" height=" 值" width=" 值" cellspacing=" 值" cellpadding=" 值" align="值" >
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    

    2)tr(一行)属性

    • align:这一行单元格内容水平摆放方式;

    值:
    left:左对齐
    right:右对齐
    center:居中对齐

    • valign:这一行单元格内容垂直摆放方式;

    值:
    left:左对齐
    right:右对齐
    center:居中对齐

    <tr align="值" valign=" 值" >
          <!-- 高宽与table的属性一致 -->
    </tr>
    

    3)td(单元格)属性

    • align:这一行单元格内容水平摆放方式;

    值:
    left:左对齐
    right:右对齐
    center:居中对齐

    • valign:这一行单元格内容垂直摆放方式;

    值:
    left:左对齐
    right:右对齐
    center:居中对齐

    <td align=" 值" valign=" 值">
    
    </td>
    

    单元格合并:

    属性:

    • colspan 指明这一个单元格横向占据几个单元格宽度 默认为1
    • rowspan 指明这一个单元格纵向占据几个单元格高度 默认为1

    例:

    <table border="1" height="300" width="300" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="2">1</td>  
            <td>3</td>
        </tr>
        <tr>
            <td rowspan="2">4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
    </body>
    

    相关文章

      网友评论

        本文标题:网页设计:HTML表格标签

        本文链接:https://www.haomeiwen.com/subject/yhhxgktx.html