HTML(2)

作者: 山猪打不过家猪 | 来源:发表于2020-01-24 11:35 被阅读0次

    表格

    1.表格标签

        <table>
            <tr>
                <td>姓名</td>
            </tr>
        </table>
    

    2.表格属性
    cellspacing单元格之间的距离;
    cellpadding内容和边框的距离,一般为0

        <table border =1 width = 500 height = 200 align="center" cellspacing = 0 cellpadding = 20>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
            </tr>
            <tr>
                <td>xiaowang</td>
                <td>14</td>
                <td>male</td>
            </tr>
        </table>
    

    3.表头单元格标签

            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>xiaowang</td>
                <td>14</td>
                <td>male</td>
            </tr>
    

    4.合并单元格
    ①先确定跨行rowspan还是跨列colspan
    ②根据先上后下,先左后右找到目标,写上合并规则
    ③删除多余单元格

    image.png
    <table border="1" cellpadding ="0" cellspacing = "0" width ="500" height = "249" align="center"> 
            <caption><h4>个人简介</h4></caption>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th >今日搜索</th>
                <th>最近七日</th>
                <th rowspan="2">照片粘贴处</th>
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td>↓</td>
                <td>325</td>
                <td>123</td>
    
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td>↓</td>
                <td colspan="3">325</td>
    
            </tr>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td>↓</td>
                <td colspan="3">325</td>
            </tr>
    
        </table>
    

    列表标签

    列表常用来布局
    1.无序列表
    主要用于排版

    <body>
        <ul>
            <li>apple</li>
            <li>banana</li>
            <li>melon</li>
        </ul>
    </body>
    

    2.有序列表
    主要用于制造表格

        <ol>
            <li>apple</li>
            <li>banana</li>
            <li>melon</li>
        </ol>
    </body>
    

    3.自定义列表
    一般出现在页面的最下面


    image.png
        <dl>
            <dt>服务支持</dt>
            <dd>售后政策</dd>
            <dd>自助服务</dd>
            <dd>相关下载</dd>
        </dl>
        <dl>
            <dt>线下门店</dt>
            <dd>小米之家</dd>
            <dd>服务网点</dd>
            <dd>授权体验店</dd>
        </dl>
    

    相关文章

      网友评论

          本文标题:HTML(2)

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