前端基础学习01-html表格与列表

1.表格

1.1表格的主要作用

表格的主要作用是展示数据，一个好的表格可以将繁杂的数据变得有条理，可读性更强。

　

姓名年龄性别
王兰花 22 男
阿珍 18 女
阿强 19 男
嗯嗯嗯 啊啊啊啊阿啊啊 啊啊啊啊啊啊啊啊啊啊！！！！！！

 

1.2表格的基本语法

tr：表示行

td：表示单元格

th：表示表头单元格，常用在第一行，可以使字体加粗居中，起强调作用

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>

    <tr>
        <td>王兰花</td>
        <td>22</td>
        <td>男</td>
    <tr>
        
    <tr>
        <td>阿珍</td>
        <td>18</td>
        <td>女</td>
    <tr>

    <tr>
        <td>阿强</td>
        <td>19</td>
        <td>男</td>
    <tr>
</table>

1.3表格属性

这些属性要写在table标签里，如：<table align="center"></table>

表格标签这部分属性实际开发不常用，后期一般通过css来设置。

常用属性有：

属性名属性值描述
align left、right、center 规定对齐方式
border 1 or 0 规定表格单元是否有边框，0表示没有边框
cellpadding 像素值 规定字体与单元格边框之间的距离，默认1像素,一般设置为0
cellspacing 像素值 规定单元格与单元格之间的距离，默认2像素，一般设置为0
width 像素值或百分比 规定表格的宽度
height 像素值或百分比 规定表格的高度

1.4表格结构标签

实际开发中，表格可能很长，为了让表格的结构更加清晰，将表格分割成两部分：

1)表格头部：<thead>
姓名年龄性别

 

2)表格主体：<tbody>
王兰花 22 男
阿珍 18 女
阿强 19 男
嗯嗯嗯 啊啊啊啊阿啊啊 啊啊啊啊啊啊啊啊啊啊！！！！！！ 
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>王兰花</td>
            <td>22</td>
            <td>男</td>
        <tr>

        <tr>
            <td>阿珍</td>
            <td>18</td>
            <td>女</td>
        <tr>

        <tr>
            <td>阿强</td>
            <td>19</td>
            <td>男</td>
        <tr>
    </tbody>
</table>

1.5 Steam游戏排行榜案例

排名游戏名游戏价格当前玩家人数今日峰值趋势下载链接
1 CS:GO 免费 890,656 1,085,149 Steam
2 Dota2 免费 435,348 596,512 Steam
3 吃鸡 98$ 293,494 419,519 Steam
4 Apex 免费 135,188 196,318 Steam
5 GTA V 118.5$ 116,705 150,369 Steam 
<!DOCTYPE html>
<!--
--author:TSCCG
--date:2021/04/07
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Steam游戏在线人数排行榜</title>
</head>
<body>
    <table align="center" cellpadding="0" cellspacing="0" border="1" width="600" height="300">
        <thead>
            <tr>
                <th>排名</th>
                <th>游戏名</th>
                <th>游戏价格</th>
                <th>当前玩家人数</th>
                <th>今日峰值</th>
                <th>趋势</th>
                <th>下载链接</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>1</td>
                <td>CS:GO</td>
                <td>免费</td>
                <td>890,656</td>
                <td>1,085,149</td>
                <td><img src="up.jpg" alt="上升"></td>
                <td><a href="#">Steam</a></td>
            </tr>

            <tr>
                <td>2</td>
                <td>Dota2</td>
                <td>免费</td>
                <td>435,348</td>
                <td>596,512</td>
                <td><img src="up.jpg" alt="上升"></td>
                <td><a href="#">Steam</a></td>
            </tr>

            <tr>
                <td>3</td>
                <td>吃鸡</td>
                <td>98$</td>
                <td>293,494</td>
                <td>419,519</td>
                <td><img src="down.jpg" alt="下降"></td>
                <td><a href="#">Steam</a></td>
            </tr>

            <tr>
                <td>4</td>
                <td>Apex</td>
                <td>免费</td>
                <td>135,188</td>
                <td>196,318</td>
                <td><img src="down.jpg" alt="下降"></td>
                <td><a href="#">Steam</a></td>
            </tr>

            <tr>
                <td>5</td>
                <td>GTA V</td>
                <td>118.5$</td>
                <td>116,705</td>
                <td>150,369</td>
                <td><img src="up.jpg" alt="上升"></td>
                <td><a href="#">Steam</a></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

1.6合并单元格

1)合并单元格方式：

  • 跨行合并：rowspan="合并的单元格数"

  • 跨列合并：colspan="合并的单元格数"

2)目标单元格：

写合并代码的单元格

  • 跨行：最上侧的单元格为目标单元格

  • 跨列：最左侧的单元格为目标单元格

3)合并步骤：

  1. 确定是跨行合并还是跨列合并

  2. 找到目标单元格，书写合并代码。如：<td colspan="2"></td>

  3. 删除多余单元格

4)code:

<!DOCTYPE html>
<!--
--author:TSCCG
--date:2021/04/08
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>
</head>
<body>
    <table align="center" border="1" cellspacing="0" width="500" height="250">
        <tr>
            <td></td>
            <!--跨列合并单元格-->
            <td colspan="2"></td>
        </tr>

        <tr>
            <!--跨行合并单元格 -->
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

1.7 表格总结

1)表格标签

table标签、tr行标签、td单元格标签、th表头单元格标签

thead表头部标签、tbody表格主体标签

2)表格属性

属性名属性值描述
align left、right、center 规定对齐方式
border 1 or 0 规定表格单元是否有边框，0表示没有边框
cellpadding 像素值 规定字体与单元格边框之间的距离，默认1像素,一般设置为0
cellspacing 像素值 规定单元格与单元格之间的距离，默认2像素，一般设置为0
width 像素值或百分比 规定表格的宽度
height 像素值或百分比 规定表格的高度

3)合并表格

  1. 确定是跨行合并还是跨列合并

    跨行：rowspan="2"

    跨列：colspan="2"

  1. 找到目标单元格，在目标单元格书写合并代码

    <td rowspan="2"></td>

  2. 删除多余单元格

2.列表

2.1列表的主要作用

表格主要用来展示数据，列表则用来布局。

列表的特点是整齐、整洁、有序，用来布局更加自由、方便。

2.2无序列表(重要)

1)语法格式：

<h4>无序列表</h4>
<ul>
    <li>臭豆腐</li>
    <li>腐乳</li>
    <li>奥利给</li>
</ul>

2)特点：

  1. ul标签内只能嵌套li标签

  2. 无序列表各个列表项之间没有顺序级别关系，都是并列关系

  3. li标签里可以存放任何元素

    <ul>
        <li>
            <p>秘制小汉堡</p>
        </li>
    </ul>

  4. 无序列表带有自己的样式属性，一般用css设置

2.3有序列表

1)语法格式：

<h4>有序列表</h4>
<ol>
    <li>特大杯</li>
    <li>大杯</li>
    <li>中杯</li>
    <li>小杯</li>
</ol>

2)特点：

  1. 有序列表各列表项之间为顺序或级别关系

  2. ol标签里只能嵌套li标签

  3. li标签内可以存放任何元素

    <ol>
        <li>
            <p>猫屎coffee</p>
        </li>
    </ol>

  4. 有序列表带有自己的样式属性，一般用css设置

2.4自定义列表

1)使用场景：

常用于对术语或名词进行描述或解释

<dl>
    <dt>支付方式(名词1)</dt>
    <dd>货到付款(名词1解释1)</dd>
    <dd>在线支付(名词1解释2)</dd>
    <dd>分期付款(名词1解释3)</dd>
    <dd>公司转账(名词1解释4)</dd>
</dl>

2)特点

  1. dl标签中只能嵌套dt标签和dd标签

  2. dt和dd为并列关系

  3. dt标签和dd标签没有个数限制，大多是一个dt对应多个dd

2.5列表总结

标签名定义说明
<ul></ul> 无序列表 各列表项之间没有顺序，使用较多，里面只能包含li标签，li标签里可以嵌套任何标签
<ol></ol> 有序列表 各列表项之间有顺序，使用较少，里面只能包含li标签，li标签里可以嵌套任何标签
<dl></dl> 自定义列表 里面只能包含dt dd标签，dt dd标签内可以嵌套任何标签

需要学会判断在合适的情况下使用合适的列表

 

 

posted @ 2021-04-07 23:26  TSCCG  阅读(257)  评论(0)  编辑  收藏  举报