表格相关内容学习

最新推荐文章于 2024-07-05 14:58:38 发布

认真学习的宋小姐

最新推荐文章于 2024-07-05 14:58:38 发布

阅读量51

点赞数

分类专栏：笔记文章标签： html css html5

本文链接：https://blog.csdn.net/qq_51946936/article/details/120441900

版权

笔记专栏收录该内容

30 篇文章 2 订阅

订阅专栏

表格相关内容

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

<body>

    <!-- 无序列表 -->
    <h1>水果列表</h1>
    <!-- ul表示无序列表的整体 -->
    <!-- li表示无序列表的每一项 -->
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>哈密瓜</li>
        <li>火龙果</li>
        <li><p>随意添加</p></li>
    </ul>
     <!-- 注意点；
    ul标签中之允许包含li标签
    li标签可以包含任何内容
    -->


    <!--有序列表  -->
    <!-- ol表示有序列表的整体 ，用于包含li-->
    <!-- li表示有序列表的每一项 -->
    <h1>成绩列表</h1>
    <ol>
        <li>宋亚轩：100</li>
        <li>贺俊霖：100</li>
        <li>严浩翔：100</li>
    </ol>
     <!-- 注意点；
    ol标签中之允许包含li标签
    li标签可以包含任何内容
    -->

    <!-- 自定义列表 -->
    <!-- dl 表示自定义列表的整体 ，用于包dt、dd
         dt 表示自定义列表的主题
         dd  表示自定义列表的每一项内容 dd会默认显示缩进效果
         dt、dd标签可以包含任何内容
    -->
     <h1>帮助中心</h1>
     <dl>
         <dt>帮助中心</dt>
         <dd>帮助中心</dd>
         <dd>帮助中心</dd>
         <dd>帮助中心</dd>
         
     </dl>
     <!-- 按住ALT 帮助中心(光标在帮前面)
                  帮助中心
                  帮助中心
                  帮助中心
        之后ctrl+shift选中要移动的
        ctrl+x 剪切
        之后在alt 按住选择多行位置
        ctrl+v粘贴过来
                -->

  <!-- 无序列表最常用、有序偶尔用、自定义列表底部导航用 -->

</body>

效果图
在这里插入图片描述

表格标签

<body>
    <!-- table表示表格的整体
        tr表示表格的每一行
        td表示表格的单元格
        table>tr>td
    -->
    <!-- 四行三列 -->
    <table  border="1" width="300" height="300">
        <caption><h3>时代少年团</h3></caption>
        <thead>
            <tr>
              <th>姓名</th>
              <th>成绩</th>
              <th>评语</th>
            </tr>
        </thead>
       <tbody>
        <tr>
            <td>马嘉祺</td>
            <td>100</td>
            <td>帅</td>
        </tr>
        <tr>
            <td>丁程鑫</td>
            <td>100</td>
            <td>美</td>
        </tr>
       </tbody>
        <tfoot>
            <tr>
                <td>张真源</td>
                <td>100</td>
                <td>秀</td>
            </tr>
        </tfoot>

        <!--boder边框宽度
            width表格宽度
            height表格高度 
         -->
        

         <!-- 表格大标题 caption 默认居中  注意：写在table内部
              表格单元格 th 表示一列小标题，通常用于表格第一行，默认加粗居中  
              th标签写在tr标签内部(用于替换td标签)
        -->

        <!--表格结构标签   注意点：内部用于包裹tr标签
             thead：表格的头部
             tbody：表格主体
             tfoot：表格底部
        -->
        <!-- ctrl+d 可以选中下一个一样的内容，可以一起替换 -->
    </table>

</body>

效果图：
在这里插入图片描述

合并单元格左上原则
跨行合并(垂直合并成一个) rowspan
跨列合并(水平合并成一个)colspan
取值为所占格子数

<tbody>
        <tr>
            <td>马嘉祺</td>
            <td rowspan="2">100</td>
            <td rowspan="2">帅</td>
        </tr>
        <tr>
            <td>丁程鑫</td>
            <!-- <td>100</td> -->
            <!-- <td>美</td> -->
        </tr>
       </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="2">郎才女貌</td>
            </tr>
        </tfoot>

效果图
在这里插入图片描述
注：只有同一个结构标签的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

认真学习的宋小姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格相关内容学习

表格相关内容有序列表、无序列表、自定义列表<body>  <h1>水果列表</h1>   <ul> <li>榴莲</li> <li>香蕉</li> <li>苹果&lt
复制链接

扫一扫