5、列表、表格

最新推荐文章于 2024-09-25 16:17:34 发布

原创最新推荐文章于 2024-09-25 16:17:34 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #列表

Web前端专栏收录该内容

16 篇文章

订阅专栏

列表、表格

列表
表格

一、列表

1.1、说明

列表是块级元素。<ul>是无序列表，<ol>是有序列表。

1.2、属性

无序列表<ul>
- type：disc——实心圆，square——实心方块，circle——空心圆。
有序列表<ol>
- reverset=“reverset”：将列表设置为降序排列。
- type：1、A、a、I、i。（后面两个是罗马数字符号）
- start：规定列表序号的起始下标（数字），最好还是配合type属性一起使用。
列表项<li>
- value：和start的作用一样，但优先级更高。
- type：和type的作用一样，但优先级更高。

1.3、使用

1）、有序列表

<body>
    <ul type="1">
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ul>
</body>

2）、无序列表

<body>
    <ol type="A" start="D">
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ol>
</body>

二、表格

2.1、说明

顾名思义，在网页中插入一个表格。
所有的width和height属性值，都是不包括外框的。

2.2、属性

table
- width：表格宽度（不包含外框线），默认是随表格内容自动调整。
- border：表格外框的厚度。
- cellpadding：单元格内边距。
- cellspacing：规定单元格之间的空白。
- bgcolor：表格的背景颜色
tr：
- align：文本水平对齐方式。【left、center、right】
- valign：文本垂直对齐方式。【top、middle、bottom】
td、th：
- align：文本水平对齐方式。【left、center、right】
- valign：文本垂直对齐方式。【top、middle、bottom】
- rowspan：跨列数量
- colspan：跨行数量

在这里插入图片描述

2.3、使用

<body>
    <table><!--表格容器-->
        <tr><!--行容器,第1行-->
            <th>标题一</th><!--单元格>>标题-->
            <th>标题二</th>
        </tr>
        <tr><!--行容器,第2行-->
            <th>标题一</th><!--单元格>>值-->
            <th>标题二</th>
        </tr>
    </table>
</body>