HTML5基础笔记四（标签之表格）

凡梦_leo

已于 2024-07-11 00:07:19 修改

阅读量236

点赞数

分类专栏： html5 文章标签： html5 笔记数学建模

于 2023-06-27 10:20:38 首次发布

本文链接：https://blog.csdn.net/qq_55006020/article/details/131410915

版权

html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML5基础笔记四（标签之表格）

二，完整的表格格式

六，表格的合并

表格的介绍（tr+th+td）

表格是一大类，故单独做一篇详细介绍

单独介绍：

标签之表格 form
表格在数据展示方面非常的优秀，
由行 列 单元格组成
单元格，同行等高，同列等宽的特点
表格 table  主标签
行<tr>  之标签
单元格(列)<td>
表格的快捷鍵 table>tr*3>td*5{文本信息}

表格的属性
table属性
示例
<table border='1' width='100px' height='200px' aligh='left' celladding=>
border=数字 设置表格的边框  数字代表单元格的像素宽度
width  设置表格的宽度
height 设置表格的高度
aligh 设置表格的水平对齐方式
cellpadding 设置内容距离边框的距离
bgcolor 设置表格的背景颜色
bordercolor 设置边框颜色
background 设置背景图片
<tr>的属性
示例： <tr >
height 设置一行的高度
bgcolor 设置一行的背景颜色
background 设置一行的背景图片
align 设置行里的内容水平对齐方式 取值 left center right
valign  设置行你内容垂直对齐方式 取值top midle botton

td属性 同上


表格的其他标签
表格名字 <caption>
表格的头部 thead
特殊单元格 th
表格的身体 tboby
表格的脚步 tfoot

表格的介绍代码一下代码仅仅包含body部门如果复制运行的话，请自行补全全部html5格式：

<body>
<!--表格一 表格的介绍-->
<!--table相当于一个容器，表格信息存放在整个标签里面-->
<!--border 表示表格的线宽  width 和height 表示单元格的宽度-->
<table border="1" width="500px" height="200px">
<!--  tr代表行 一个tr代表一行-->
  <tr>
<!--      通常第一行 开始设置表格的内容格式 比如类型等等-->
  <td>序号</td>
  <td>姓名</td>
  <td>年龄</td>
  <td>地址</td>
  </tr>
  <tr>
  <td> 1 </td>
<!--    th特殊显示-->
  <th>tm</th>
  <td>14</td>
  <td>湖北随州</td>
  </tr>
  <tr>
    <td> 2</td>
    <td>ly</td>
    <td>15</td>
    <td>湖北随州</td>
  </tr>
    <tr>
    <td>3</td>
    <td>ly</td>
    <td>15</td>
    <td>湖北随州</td>
  </tr>
</table>

运行效果：

完整的表格格式

代码如下（同上，一下代码仅包含body部分）：

<!--表格二 完整的表格格式-->
<table border="1" width="500px" height="100px">
<!--  表格名称-->
  <caption>学生统计表</caption>
<!--  标题-->
  <thead>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>地址</th>
  </thead>
<!--  身体部分-->
  <tboby>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>18</td>
      <td>中国</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>19</td>
      <td>美国</td>
    </tr>
  </tboby>
<!--  脚部分-->
  <tfoot>
  <tr>
    <td>3</td>
    <td>王五</td>
    <td>20</td>
    <td>英国</td>
  </tr>
  </tfoot>

</table>

运行效果如下：

表格的属性一（type属性）

代码如下：

<!--表格的属性-->
<!--
algin 默认是 left 可以设置center right
cenllpading 是设置和边框之间的距离  像素点
cellspacing  是设置表格之间的线宽
bgcolr 设置表格背景颜色
background 设置背景图片
bordercolor 设置线框颜色
-->
<!--    设置表格线宽    设置表格的宽度 和高度      默认是靠左，现在设置居中                       表格的线宽         表格的背景颜色       边框为红色         -->
<table border="1" width="800px" height="500px" align="center"
       cellpadding="50px" cellspacing="10px" bgcolor="pink" bordercolor="red"

<!--                    px是像素                   right也可以      设置距离边框之间的距离           -->
  <caption>测试的表格</caption>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
    <td>单元格4</td>

  </tr>
  <tr>
    <td>单元格5</td>
    <td>单元格6</td>
    <td>单元格7</td>
    <td>单元格8</td>

  </tr>
  <tr>
    <td>单元格9</td>
    <td>单元格10</td>
    <td>单元格11</td>
    <td>单元格12</td>

  </tr>
  <tr>
    <td>单元格13</td>
    <td>单元格14</td>
    <td>单元格15</td>
    <td>单元格16</td>

  </tr>
</table>

运行效果：

表格的属性二（tr属性）

<table border="1" width="400px">

  <caption>测试的表格2</caption>
<!--
tr的行属性 介绍
heigth 设置该行的高度
bgcolor 设置改行的背景颜色  #ff1493 是通过pyc内置u选择的颜色  也可以用pink 等颜色选项
background  设置背景图片    ="images图片音频视频素材/1.jpg"
align 设置居中
valign 设置垂直距离 top、middle、bottom
-->
  <tr height="200px"  align="center" valign="top">

    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
    <td>单元格4</td>

  </tr>
  <tr>
    <td>单元格5</td>
    <td>单元格6</td>
    <td>单元格7</td>
    <td>单元格8</td>

  </tr>
  <tr>
    <td>单元格9</td>
    <td>单元格10</td>
    <td>单元格11</td>
    <td>单元格12</td>

  </tr>
  <tr>
    <td>单元格13</td>
    <td>单元格14</td>
    <td>单元格15</td>
    <td>单元格16</td>

  </tr>
</table>

运行效果如下：

表格的属性三（td属性）

代码如下：


<table border="1" align="center">

  <caption>测试的表格3</caption>

  <tr>
<!--
td的属性
width 设置单元格的宽度 同列等宽   设置了一个 这一列都会变宽
height 设置单元格的高度  同列等高
align  设置水平距离
valign 设置单元格垂直对齐的方式
bgcolor 设置单元格背景颜色
background  设置单元格背景图片

-->
    <td width="200px" height="100px" align="center" valign="bottom"
        bgcolor="pink"



    >单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
    <td>单元格4</td>

  </tr>
  <tr>
    <td>单元格5</td>
    <td>单元格6</td>
    <td>单元格7</td>
    <td>单元格8</td>

  </tr>
  <tr>
    <td>单元格9</td>
    <td>单元格10</td>
    <td>单元格11</td>
    <td>单元格12</td>

  </tr>
  <tr>
    <td>单元格13</td>
    <td>单元格14</td>
    <td>单元格15</td>
    <td>单元格16</td>

  </tr>
</table>

运行效果如下：

表格的合并

表格之单元格合并
水平合并 colspan
垂直合并 rowspan
水平合并保留左，删除右
垂直合并保留右，删除左
水平和垂直合并一起的时候，保留左上，删除其他

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格之单元格合并</title>
</head>
<body>
<p align="center">合并3和4单元格</p>
<p align="center">合并10和14和18单元格</p>
<p>水平合并 保留左边，删除右边</p>
<p>垂直合并，保留上边，删除下边</p>
<p>把单元格 15 16 19 20 合并</p>
<p>水平和垂直都有的时候，保留左上，删除其他</p>
<table align="center" border="2" width="600px" height="300px">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td colspan="2">单元格3单元格4</td>
<!--    <td>单元格4</td>-->
  </tr>
  <tr>
    <td>单元格5</td>
    <td>单元格6</td>
    <td>单元格7</td>
    <td>单元格8</td>
  </tr>
  <tr>
    <td>单元格9</td>
<!--    rowspan 是垂直合并 后面表示是合并的数列-->
    <td rowspan="3">单元格10 <br>单元格14 <br> 单元格18</td>
    <td>单元格11</td>
    <td>单元格12</td>
  </tr>
  <tr>
    <td>单元格13</td>
<!--    <td>单元格14</td>-->
    <td colspan="2" rowspan="2">单元格15 16 19 20</td>
<!--    <td>单元格16</td>-->
  </tr>
  <tr>
    <td>单元格17</td>
<!--    <td>单元格18</td>-->
<!--    <td>单元格19</td>-->
<!--    <td>单元格20</td>-->
  </tr>
</table>
</body>
</html>

运行效果：

凡梦_leo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML5基础笔记四（标签之表格）

表格是一大类，故单独做一篇详细介绍单独介绍：标签之表格 form表格在数据展示方面非常的优秀，由行列单元格组成单元格，同行等高，同列等宽的特点表格 table 主标签行之标签单元格(列)表格的快捷鍵 table>tr*3>td*5{文本信息}表格的属性table属性示例border=数字设置表格的边框数字代表单元格的像素宽度width 设置表格的宽度height 设置表格的高度aligh 设置表格的水平对齐方式。
复制链接

扫一扫