您的当前位置:首页正文

html列表

来源:图艺博知识网

无序列表

<!-- 无序列表 -->
    <ul type="square">
        <li>吃</li>
        <li>喝</li>
        <li>玩</li>
        <li>乐</li>
        <li>啊</li>
    </ul>

有序列表

<ol type="a">
       <li>开门</li>
       <li>关门</li>
       <li>关门</li>
   </ol>

自定义列表

<p>自定义列表</p>

    <dl>
        <dt>列表标题</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
    </dl>

表格

<!-- table
    1.border 边框宽度 默认0
    2.cellspacing 边框间距 默认2
    3.width 宽度
    4.height 高度
    5.cellpadding 内容距离左边的距离
    6.align 表格对齐方式,默认左对齐
    7.bgcolor 背景颜色
     -->

    <table border="1" cellspacing="0" width="300" height="200" cellpadding="0" align="center" bgcolor="red">
                <caption><strong>人员信息表</strong></caption>
        <tr align="center">
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</td>
            <th>梦想</th>
        </tr>

        <tr>
            <td>小孩</td>
            <td>11</td>
            <td>学生</td>
            <td>没有</td>
        </tr>

        <tr>
            <td>张三</td>
            <td>22</td>
            <td>工人</td>
            <td>不一样的工人</td>
        </tr>
    </table>

表格书写的快速格式

    <!-- 表格书写的快速格式 -->
    <!-- table[border="1" width="400" height="300" cellspacing="0"]>tr*4>td*4 -->

表格完全格式

thead
tbody
tfoot

单元格合并

<!-- 单元格合并
 1.colspan=“2” 合并2列
 2.rowspan 合并行
  -->

细线表格

<table width="300" height="400" cellspacing="1" border="0" bgcolor="pink">
        <tr bgcolor="white">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr bgcolor="white">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr bgcolor="white">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr bgcolor="white">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
Top