【HTML】表格标签

`moon`晓龙

已于 2023-08-22 21:26:29 修改

阅读量229

点赞数

分类专栏： html 文章标签： html

于 2021-04-02 22:36:22 首次发布

本文链接：https://blog.csdn.net/MY9_19/article/details/115409087

版权

html 专栏收录该内容

13 篇文章 4 订阅

订阅专栏

表格标签

文章目录

- 表格标签

1、网页中的表格

网页中的表格，是给用户展示数据，不可以填写数据，特点是同行等高，同列等宽

标签：table>tr>td*num

table table-表格，一个表格最外层的标签
tr table row-表格行，表格中的一行
td table data cell-表格列，表格中的一列
caption 表格的标题，写在table下面，默认居中

属性：

border 设置表格的边框，默认是没有边框
align 设置表格布局，默认居左
width 设置表格宽度，默认内容撑开
height 设置表格高度，默认内容撑开
bgcolor 设置表格背景颜色
background 设置表格背景图片，优先级最高，会覆盖掉背景颜色
cellpadding 设置表格内容距边框的内容
cellspacing 设置单元格之间的距离，当cellspacing为0的时候，表格之间没有距离，变成一条线

Html示例：
<body>

<table>
   <tr>
       <td>一行一列</td>
       <td>一行二列</td>
       <td>一行三列</td>
   </tr>
   <tr>
       <td>二行一列</td>
       <td>二行二列</td>
       <td>二行三列</td>
   </tr>
   <tr>
       <td>三行一列</td>
       <td>三行二列</td>
       <td>三行三列</td>
   </tr>
</table>

<table border="1px" align="center" width="600px" height="550px"
    bgcolor="#7fffd4" background="resource/images/1.jpg"
    cellpadding="80px" cellspacing="0px">
 <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
     <td>4</td>
     <td>5</td>
 </tr>
 <tr>
     <td>6</td>
     <td>7</td>
     <td>8</td>
     <td>9</td>
     <td>10</td>
 </tr>
 <tr>
     <td>11</td>
     <td>12</td>
     <td>13</td>
     <td>14</td>
     <td>15</td>
 </tr>
	</table>
</body>

table	table-表格，一个表格最外层的标签
tr	table row-表格行，表格中的一行
td	table data cell-表格列，表格中的一列
caption	表格的标题，写在table下面，默认居中

border	设置表格的边框，默认是没有边框
align	设置表格布局，默认居左
width	设置表格宽度，默认内容撑开
height	设置表格高度，默认内容撑开
bgcolor	设置表格背景颜色
background	设置表格背景图片，优先级最高，会覆盖掉背景颜色
cellpadding	设置表格内容距边框的内容
cellspacing	设置单元格之间的距离，当cellspacing为0的时候，表格之间没有距离，变成一条线

2、tr的属性

属性：

height	设置一行的高度
align	设置行内元素的水平对齐方式
valign	设置行内元素的垂直对齐方式，默认为居中，取值（top,bottom）
bgcolor	设置行内背景颜色
background	设置行内图片背景，优先级高

Html示例：

<body>
<!-- 设置表格整体属性 -->
<table border="1px" align="center" bgcolor="#ffc0cb">
<!-- 单独设置第一行的属性 --> 
<tr height="50px" align="" background="resource/images/1.jpg" valign="">
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
</tr>
<tr>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
  <td>10</td>
</tr>
<tr>
  <td>11</td>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td>
</tr>
	</table>
</body>

3、td的属性

属性：

width	设置单元格的宽度
height	设置单元格的高度
align	设置单元格内容的水平对齐方式
valign	设置单元格内容的垂直对齐方式，默认居中
bgcolor	设置单元格的背景颜色
background	设置单元格的背景图片

<body>
<!-- 设置表格属性 -->
<table border="1px" align="center" bgcolor="#ffc0cb">
<tr>
	<!-- 设置第一行第一个单元格的属性 -->
  <td width="100px" height="50px" align="center" valign="bottom">1</td>
  <td>2ssdasdasd</td>
  <td>3asfasf</td>
  <td>4as</td>
  <td>5ddd</td>
</tr>
<tr>
	 <!-- 设置第二行第一个单元格的属性 -->
  <td height="50px">6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
  <td>10</td>
</tr>
<tr>
  <td>11</td>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td>
</tr>
	</table>
</body>

4、合并单元格

在我们正常使用表格的时候，难免会有需要把相邻的单元格合并在一起的需求，在html的table中也提供了俩个属性来进行单元格的合并

属性：

colspan	水平合并写在开始合并的单元格内，取值为数字，删除的个数是取值-1的td
rowspan	垂直合并写在开始合并的单元格内。取值为数字，删除的个数是取值-1的td

注意：合并单元格意味着一个单元格变成了俩个单元格的大小，并不是自动吞噬掉相应的单元格，所以需要我们手动删除多余的单元格

Html示例：

<body>
  <!-- 设置表格属性 -->
  <table border="1px" align="center" width="300px" height="300px">
    <tr>
      	<!-- 水平合并，大小为2个单元格大小，所以在本行需要删除1个td -->
        <td colspan="2"></td>
        <td></td>
        <td></td>
      	<!-- 垂直合并，大小为2个单元格大小，所以在下一行中需要删除1个td -->
        <td rowspan="2"></td>
    </tr>
    <tr>
      	<!-- 水平合并，大小为3个单元格大小，所以在本行需要删除2个td -->
        <td colspan="3"></td>
      	<!-- 本行合并，删除了2个td，上一行垂直合并，删除了1个td，所以还剩下1个 -->
        <td></td>

    </tr>
    <tr>
        <td rowspan="3"></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td colspan="2" rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
</body>

结果：

在这里插入图片描述

5、表格小案例

制作一张报名表，效果如下

Html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>报名表</title>
<!-- 简单的样式 -->
<style>
  caption{
      height: 50px;
  }
  h1{
      color: red;
      font-weight: bolder;
  }
  body{
      background-color: aliceblue;
 ` }
  table{
      margin-top: 150px;
  }
</style>
</head>
<body>
<table border="1px" width="1200px" align="center" cellspacing="0px" cellpadding="10px">
		<!-- 标题 -->
<caption color="red"><h1><b>报名表</b></h1></caption>
<caption><h4><b>报名时间：&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
  年&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
  月&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
  日  </b></h4></caption>
	<!-- 第一行 -->  
<tr>
    <td width="150px">姓名</td>
    <td width="100px"></td>
    <td width="100px">性别</td>
    <td width="100px"></td>
    <td width="100px">微信</td>
    <td width="100px"></td>
    <td width="100px">邮箱</td>
    <td></td>
</tr>
	<!-- 第二行 -->
	 <tr>
    <td>出生年月</td>
    <td></td>
    <td>学历</td>
    <td></td>
    <td>电话手机</td>
    <td colspan="2"></td>
    <td>相关经验</td>
</tr>
	  <!-- 第三行 -->
<tr>
    <td>单位名称</td>
    <td colspan="3"></td>
    <td>单位地址</td>
    <td colspan="2"></td>
				  <td></td>
</tr>
<!-- 第四行 -->
<tr>
  <td rowspan="2">报考情况及辅导班级</td>
  <td colspan="4" align="center">
      <input type="checkbox" name="state">首次报考&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
      <input type="checkbox" name="state">非首次报考&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
      <input type="checkbox" name="state">增项
  </td>
  <td colspan="3">
    所报考科目：
      <input type="checkbox">法规&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
      <input type="checkbox">施工管理&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
      实务科目：
  </td>
</tr>
	   <!-- 第五行 -->
<tr>

  <td colspan="7">
      所报考辅导班：
      <input type="checkbox">精讲班&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
      <input type="checkbox">讲题班&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
      <input type="checkbox">冲刺班&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
      <input type="checkbox">点题班&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
      <input type="checkbox">签约协议班&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
  </td>
</tr>
<!-- 第六行 -->
<tr>
  <td>所在城市</td>
  <td colspan="3">
      &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
      省
      &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
      地区/市
  </td>
  <td>报考分校</td>
  <td></td>
  <td>咨询老师</td>
  <td></td>
</tr>
<!-- 第七行 -->
<tr>
  <td>身份证号码</td>
  <td colspan="7"></td>
</tr>
</table>
</body>
</html>

`moon`晓龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML】表格标签

表格标签文章目录表格标签1、网页中的表格2、tr的属性3、td的属性4、合并单元格5、表格小案例1、网页中的表格网页中的表格，是给用户展示数据，不可以填写数据，特点是同行等高，同列等宽标签：table>tr>td*numtabletable-表格，一个表格最外层的标签trtable row-表格行，表格中的一行tdtable data cell-表格列，表格中的一列caption表格的标题，写在table下面，默认居中属性：bor
复制链接

扫一扫