【上课笔记】table详解

上课笔记 专栏收录该内容
6 篇文章 0 订阅

table基本用法

首先要知道表格的基本标签

// table 开始 斜杠table结束 表示开始和结束内部都是 table
	<table>
	</table>

// tr 表示 是表格中的 一行
	<tr>
	</tr>

// td 表示是表格中的 一列(一班情况下是行包列,除非那个表格是左右结构)
	<td>
	</td>

// th 表示是表格中的标题列(就是表示这个列是表格中的标题)
<th>
</th>

// 基本示范:
<!--三行四列的表格-->
<table border="1">
    <tr>
        <th>第一标题</th>
        <th>第二标题</th>
        <th>第三标题</th>
        <th>第四标题</th>
    </tr>
    <tr>
        <td>第一行中的一列</td>
        <td>第一行中的一列</td>
        <td>第一行中的一列</td>
        <td>第一行中的一列</td>
    </tr>
    <tr>
        <td>第二行中的一列</td>
        <td>第二行中的一列</td>
        <td>第二行中的一列</td>
        <td>第二行中的一列</td>
    </tr>
    <tr>
        <td>第三行中的一列</td>
        <td>第三行中的一列</td>
        <td>第三行中的一列</td>
        <td>第三行中的一列</td>
    </tr>

</table>

基本示范
在这里插入图片描述


table进阶玩法

首先介绍一下整体完整结构
  1. caption:表格的标题,通常出现在表格顶部
  2. thead:定义表格的表头,通常表现为标题行
  3. tbody:定义一段表格主体,一个表格可以有多个主体,可以按照行来进行分组
  4. tfoot:定义表格的表尾,通常表现为总计行
    实际应用一下:
            <!--表格的整体结构 -->
<table border="1px">

    <!--1、caption:表格的标题,通常出现在表格顶部-->
    <caption>这是表格的标题</caption>

    <!--2、thead:定义表格的表头,通常表现为标题行-->
    <thead>
        <tr>
            <th>这是表头上的标题</th>
            <th>这是表头上的标题</th>
            <th>这是表头上的标题</th>
        </tr>
    </thead>
<!--    3. tbody:定义一段表格主体,一个表格可以有多个主体,可以按照行来进行分组-->
    <tbody style="background: cadetblue">
        <tr>
            <td>第一行tbody</td>
            <td>第一行tbody</td>
            <td>第一行tbody</td>
        </tr>
         <tr>
            <td>第二行tbody</td>
            <td>第二行tbody</td>
            <td>第二行tbody</td>
        </tr>
         <tr>
            <td>第三行tbody</td>
            <td>第三行tbody</td>
            <td>第三行tbody</td>
        </tr>
    </tbody>
    <tbody style="background: aqua">
    <tr>
        <td>第二个tbody</td>
        <td>第二个tbody</td>
        <td>第二个tbody</td>
    </tr>
    <tr>
        <td>第二个tbody</td>
        <td>第二个tbody</td>
        <td>第二个tbody</td>
    </tr>
    </tbody>
<!--    4. tfoot:定义表格的表尾,通常表现为总计行-->
    <tfoot>
        <tr>
            <td>表格的底部</td>
            <td>表格的底部</td>
            <td>表格的底部</td>
        </tr>
    </tfoot>

    </table>

另外一个 table 的实用属性

合并单元格

  • 横向合并单元格:colspan
  • 纵向合并单元格:rowspan

看代码意会一下

<table border="1">
    <tr>
<!--        合并两列所以 这一行要少些一列-->
        <td colspan="2">123134</td>
        <td>123134</td>
<!--        合并两行,所以下一行要少些一列-->
        <td rowspan="2">123134</td>
    </tr>
    <tr>
        <td >123134</td>
        <td>123134</td>
        <td>123134</td>
    </tr>
    <tr>
        <td>123134</td>
        <td>123134</td>
        <td>123134</td>
        <td>123134</td>
    </tr>
</table >

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

  • 1
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值