zoukankan      html  css  js  c++  java
  • 列表与表格的一些学习

    列表分为无序列表和有序列表

    无序列表:

        无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

        无序列表始于 <ul> 标签。每个列表项始于 <li>。

    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>

    网页显示为:●Coffee

             ●Milk

    有序列表:

           同样,有序列表也是一列项目,列表项目使用数字进行标记。

         有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>

    网页显示为:1 Coffee

          2 Milk

    其中列表属性type可以定义前面序号的类型:如type=1,则显示阿拉伯数字1234   type=A,则显示ABCD

    类型主要有 1   A   a   i    I   等等

    其中start可以控制编号开始的数字例如:

    <ol type="A" start="2" >
        <li>银河系</li>
        <li>太阳系</li>
        <li>地球</li>
    </ol>

    在网页显示为:  B 银河系

             C 太阳系

             D 地球

    Table表格:

    table是副标签,它的子标签有: tr(行)、th(表头)、td(内容)

    table属性定义边框为boder,html定义属性格式为width=90%   css定义属性格式为style=width:90%;

    融合表格:

    colspan是从自身开始往右融合几个(多列)

    <table border="1px"style="border-collapse: collapse;" width="90%">
                <!--这是表头-->
                
                <tr>
                    <th>季度</th>
                    <th colspan="2">收入(元)</th>
                    <th colspan="2">支出(元)</th>
                </tr>
                <!--这是第一行内容-->
                
                <tr style="text-align: center;">
                    <td></td>
                    <td>建筑</td>
                    <td>房地产</td>
                    <td>销售服务</td>
                    <td>办公</td>            
                </tr>
                <!--这是第二行内容-->
                
                <tr style="text-align: center;">
                    <td>第一季度</td>
                    <td>306000</td>
                    <td>282000</td>
                    <td>9000</td>
                    <td>10000</td>
                </tr>
                <!--这是第三行内容-->
                <tr style="text-align: center;">
                    <td>第二季度</td>
                    <td>450000</td>
                    <td>364000</td>
                    <td>54000</td>
                    <td>20000</td>
                </tr>
            </table>

    在网页显示为:

  • 相关阅读:
    抓取登录后的数据
    Form认证的几点说明
    eclipse启动错误:java.lang.NoClassDefFoundError: org/eclipse/core/resources/IContainer
    mysql游标的使用 No data
    mysql insert 主键 重复问题
    tail 命令
    maven 打包可执行jar的方法
    maven中如何打包源代码
    工程师,请优化你的代码
    在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)
  • 原文地址:https://www.cnblogs.com/zzq123/p/9798785.html
Copyright © 2011-2022 走看看