HTML表格——小白篇(7)

最新推荐文章于 2024-05-09 10:12:04 发布

余神

最新推荐文章于 2024-05-09 10:12:04 发布

阅读量144

点赞数 1

分类专栏： HTML学习文章标签： html

本文链接：https://blog.csdn.net/weixin_48101294/article/details/110920734

版权

HTML学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

返回目录

表格

为什么使用表格
简单通用
结构稳定

基本结构

在这里插入图片描述

显示结果：

在这里插入图片描述

属性	说明
< table>< /table>	定义表格的标签
< tr>< /tr>	定义表格的行
< td>< /td>	定义表格的列
< th>< /th>	一般定义表头单元格，文字会加粗居中

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
      行：tr
      列：td
 border: 边框
 clospan:跨列
 rowspan:跨行
-->

<table border="1px">
   <tr>
       <th colspan="3">课程表</th>
   </tr>
    <tr>
        <td rowspan="2">上午</td>
        <td>语文</td>
        <td>语文</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>数学</td>
    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>数学</td>
        <td>数学</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>数学</td>
    </tr>
</table>
</body>
</html>

网页显示
在这里插入图片描述

表格属性

属性名	属性值	说明
align	left、center、right、	表格的对齐方式 , < table align=“center” >
border	数字或” “	表格是否有边框，默认”“，没有边框，, < table border=“1” >
cellpadding	像素值	表格单元格边缘与内容之间的空白，默认1像素。, < table cellpadding=“0” >
cellpacing	像素值	表格单元格之间的空白，默认2像素。, < table cellpacing=“0” >
width	像素值	表格的宽度，< table width=“133” >
height	像素值	表格的高度， < table height=“133” >

合并单元格

先确定是跨行还是跨列合并。
找到目标单元格，写上合并的单元格数量：比如：< td colspan=“2”>< /td>
删除多余单元格

属性名	属性值	说明
colspan	数字	跨列，例如：< td colspan=“2”>内容< /td>
rowspan	数字	跨行, 例如：< td rowspan=“2”>内容< /td>

在这里插入图片描述

表格结构标签

为了更好的表示表格的语义，可以将表格分割成表头部分和表格主体部分两大部分。
表格结构标签，分别用< thead>标签表格的头部区域、< tbody>标签表格的主体区域。这样更好的分清表格结构。

<table border="1px">
<thead>              《-----------------------------------------------------------------------------------
   <tr>
       <th colspan="3">课程表</th>
   </tr>
   </thead>          《----------------------------------------------------------------------------------
   <tbody>           《---------------------------------------------------------------------------------
    <tr>
        <td rowspan="2">上午</td>
        <td>语文</td>
        <td>语文</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>数学</td>
    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>数学</td>
        <td>数学</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>数学</td>
    </tr>
    </tbody>         《--------------------------------------------------------------------------------
</table>

在这里插入图片描述

余神

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML表格——小白篇(7)

表格为什么使用表格简单通用结构稳定基本结构单元格行列跨行跨列案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格学习</title></head><body><!--表格table 行：tr 列：td border: 边框 clo
复制链接

扫一扫