Web学习---列表和表格

最新推荐文章于 2023-02-15 05:09:17 发布

小雪Margain

最新推荐文章于 2023-02-15 05:09:17 发布

阅读量250

点赞数

分类专栏：学习文章标签： web

本文链接：https://blog.csdn.net/qq_42862581/article/details/97644394

版权

学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、列表

类型	介绍	标签
有序列表	列表项的标记有顺序，用数字或者字母表示顺序。	`<ol></ol>`
无序列表	列表项是无序的，用小黑点或者小方框，小圆圈表示。	`<ul></ul>`

list-style-type可以制定列表项标记的类型

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
<style>
ol{
/*list-style-type可以指定列表项标记的类型*/
/*list-style-type: lower-alpha;//小写字母*/
/*list-style-type:upper-alpha;//大写字母*/
/*list-style-type: lower-roman;//小写罗马数字*/
/*list-style-type: upper-roman;//大写罗马数字*/
list-style-type: demical;//阿拉伯数字
}
ul{
/*list-style-type: circle;//小圆圈*/
/*list-style-type:disc;//实心圆*/
list-style-type: square;//实心方块
}

</style>
</head>
<body>
<h1>有序列表</h1>
<ol>
<li>水果</li>
<li>蔬菜</li>
</ol>
<h1>无序列表</h1>
<ul>
<li>西瓜</li>
<li>奶茶</li>
<li>冰淇淋</li>
</ul>

</body>
</html>

预览效果

有序列表的列表项标记类型

list-style-type: lower-alpha;//小写字母
list-style-type: upper-alpha;//大写字母
list-style-type: lower-roman;//小写罗马数字
list-style-type: upper-roman;//大写罗马数字
list-style-type: demical;//阿拉伯数字

无序列表的列表项标记类型

list-style-type: circle;//小圆圈
list-style-type:disc;//实心圆
list-style-type: square;//实心方块

二、表格

表格包含的标签table，caption，tr,th,td，要实现一个表格，最外层要用table标签包裹，caption可以设置表格的标题，tr是表格的行，th、td是表格的列，th会把文字加粗，一般用来指明表格表头，
table的一些属性

cellspacing：属性-定义表格单元格之间的空间
cellpadding属性-表示单元格边框与单元格内容之间的距离
border-collapse：设置表格的边框是否被折叠成一个单一的边框或隔开，当他设置成collapse时，边框是单个线。

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
    <style>
      caption{
        caption-side: top;
        margin-bottom: 10px;
      }
      table{
        border-collapse:collapse ;
      }
      table,th,td{
        border: 1px solid black;
      }
      th{
        width: 100px;
        height: 30px;
        text-align: center;
        background-color: #cccccc;
      }
      td{
        width: 100px;
        text-align: center;
      }
    </style>
</head>
<body>
  <table>
    <caption>表一</caption>
    <tr>
      <th>商品名称</th>
      <th>类别</th>
      <th>数量／斤</th>
      <th>单价／斤</th>
      <th>销售金额</th>
    </tr>
    <tr>
      <td>火龙果</td>
      <td>水果</td>
      <td>15</td>
      <td>5</td>
      <td>75</td>
    </tr>
    <tr>
      <td>葡萄</td>
      <td>水果</td>
      <td>50</td>
      <td>1</td>
      <td>50</td>
    </tr>
    <tr>
      <td>芒果</td>
      <td>水果</td>
      <td>10</td>
      <td>8</td>
      <td>80</td>
    </tr>
    <tr>
      <td>桃子</td>
      <td>水果</td>
      <td>25</td>
      <td>1</td>
      <td>25</td>
    </tr>
  </table>
</body>
</html>

预览

3.合并单元格

如果要将两个或多个列合并为一个列，将使用colspan属性
如果要合并两行或更多行，则将使用rowspan属性。

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
    <style>
      caption{
        caption-side: top;
        margin-bottom: 10px;
      }
      table{
        border-collapse:collapse ;
      }
      table,th,td{
        border: 1px solid black;
      }
      th{
        width: 100px;
        height: 30px;
        text-align: center;
        background-color: #cccccc;
      }
      td{
        width: 100px;
        text-align: center;
      }
    </style>
</head>
<body>
  <table>
    <tr> <td colspan="5">表格</td></tr>
    <tr>
      <th>商品名称</th>
      <th>类别</th>
      <th>数量／斤</th>
      <th>单价／斤</th>
      <th>销售金额</th>
    </tr>
    <tr>
      <td>火龙果</td>
      <td rowspan="4">水果</td>
      <td>15</td>
      <td>5</td>
      <td>75</td>
    </tr>
    <tr>
      <td>葡萄</td>
      <td>50</td>
      <td>1</td>
      <td>50</td>
    </tr>
    <tr>
      <td>芒果</td>
      <td>10</td>
      <td>8</td>
      <td>80</td>
    </tr>
    <tr>
      <td>桃子</td>
      <td>25</td>
      <td>1</td>
      <td>25</td>
    </tr>
  </table>
</body>
</html>

预览

小雪Margain

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web学习---列表和表格

一、列表类型介绍标签有序列表列表项的标记有顺序，用数字或者字母表示顺序。<ol></ol>无序列表列表项是无序的，用小黑点或者小方框，小圆圈表示。<ul></ul>list-style-type可以制定列表项标记的类型例子<!DOCTYPE html><html lang="en"&...
复制链接

扫一扫