码迷,mamicode.com
首页 > 其他好文 > 详细

列表与表格的一些学习

时间:2018-10-16 17:39:08      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:学习   idt   ali   bsp   col   融合   类型   自身   它的   

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

无序列表:

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

    无序列表始于 <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>

在网页显示为:

技术分享图片

列表与表格的一些学习

标签:学习   idt   ali   bsp   col   融合   类型   自身   它的   

原文地址:https://www.cnblogs.com/zzq123/p/9798785.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!