HTMl--表格案例

最新推荐文章于 2024-08-19 20:53:10 发布

新建Word

最新推荐文章于 2024-08-19 20:53:10 发布

阅读量119

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_64848411/article/details/132030239

版权

本文介绍了HTML中用于创建表格的关键标签，如<table>、<tr>、<th>、<td>及其属性，包括colspan、rowspan等。同时，也讲解了有序列表(<ol>)、无序列表(<ul>)和自定义列表(<dl>)的用法。

摘要由CSDN通过智能技术生成

<table>标签

<table>标签就是表格标签

<tr>就代表表格中的一行数据，一堆tr就是一行数据

<th>只能用于表格的第一行，能够给第一行的文字自动加粗，和针对文字所在的单元格内居中对齐

<td>代表表格中一行中的一个单元格，也就是说一对td标签就是一行中的一个单元格。

针对<table>标签还有多个属性

colspan属性为合并列单元格（表格内容向右移动，以行为单位移动）。
rowspan属性合并行单元格（单元内容向下移动，以列为点位向下移动）。
border属性显示表格的粗细程度。
width 表格的大小px为表格的固定值也可以使用%代替。
cellspacing单元格与单元格的间距（调整大小）
cellpaddingcellpadding表格宽度大小（同样可以调整大小）
align 属性为调整表格的位置在没学CSS之前可以调整位置位置对于整个页面只能左对齐，居中，和右对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
         <!-- border表格的粗细程度  width表格的大小px为表格的固定值 也可以使用%代替   -->
         <!-- cellspacing单元格与单元格的间距       cellpadding表格宽度大小                         align表格位置 -->
    <table border="1px" width="600px" cellspacing="0px" cellpadding="0px" align="center">
        
        <tr> 
            <th rowspan="0">排名</th>
            <th>名字</th>
            <th>趋势</th>
            <th>今日搜索次数</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr> 
            <td>1</td>
            <td>原神</td>
            <td><img src="" alt=""></td>
            <td>n+</td>
            <td>n+</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr> 
            <td>2</td>
            <td>崩坏1</td>
            <td><img src="" alt=""></td>
            <td>n+</td>
            <td>n+</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr> 
            <td>3</td>
            <td>崩坏2</td>
            <td><img src="" alt=""></td>
            <td>n+</td>
            <td>n+</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr> 
            <td>4</td>
            <td>崩坏3</td>
            <td><img src="" alt=""></td>
            <td>n+</td>
            <td>n+</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
            
        <tr> 
            <td>5</td>
            <td>崩坏：星穹铁道</td>
            <td><img src="" alt=""></td>
            <td>n+</td>
            <td>n+</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
            <!-- 第七行 -->
        <tr> 
            <td>6</td>
            <td>想不起来了</td>
            <td><img src="" alt=""></td>
            <td>n+</td>
            <td>n+</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>

    </table>
</body>
</html>

有序列表，无序列表，自定义列表

有序列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>
<body>
        <!-- 默认的为阿拉伯数字排序 -->
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
        <!-- 大写字母排序 -->
    <ol type="A">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>

<ol>把<li>包裹起来，typle会改变有序列表数字的形式，

无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul type="">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

无序列表排列方式为<ul>包括<li>与有序排列不同的是无序排列前边不是数字而是一个个的实心黑点。

自定义排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自由排序</title>
</head>
<body>
    <!-- <dl> 为无需列-->
    <dl>
        <dt>姓名</dt>
        <dd>张三</dd>
        <dd>李四</dd>
        <dd>王五</dd>
        <dd>老六</dd>

        <dt>年龄</dt>
        <dd>19</dd>
        <dd>21</dd>
        <dd>22</dd>
        <dd>23</dd>
    </dl>
</body>
</html>

自由排序中为<dl>包括<dt>和<dd>，<dt>是列表的第一行，<dd>在使用时跟在<dt>后边在排序是会自动缩进不与<dt>对齐。

新建Word

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTMl--表格案例

有序列表</title></head><body>-- 默认的为阿拉伯数字排序 --><ol><li>1</li><li>2</li><li>3</li></ol>-- 大写字母排序 --><li>1</li><li>2</li><li>3</li></ol><ol>把<li>包裹起来，typle会改变有序列表数字的形式，<head><title>自由排序
复制链接

扫一扫