4 表格标签

表格标签也是一种复合标签。由：table,tr,td,th,thead,tbody组合，由行和列组合成，行和列交叉的地方就是单元格。在HTML中使用table来定义表格。网页的表格和办公软件里面的xls一样，都是有行有列的。HTML使用tr标签定义行，使用td标签定义列。

1、`<table>`和`</table>`表示一个表格的开始和结束。一组`<table>...</table>`表示一个表格。

2、border用于设置整个表格的边框宽度，默认为0，表示不显示边框。

3、`<tr>`和`</tr>`表示表格中的一行的开始和结束。一组`<tr>...</tr>`，一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。

4、`<td>`和`</td>`表示表格中的一个单元格的开始和结束。通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列，多少的单元格了。
table相关属性：
属性 值 描述
width px、% 规定表格的宽度。
height px、% 规定表格的高度。
align left、center、right 规定表格相对周围元素的对齐方式。
bgcolor rgb(x,x,x)、#xxxxxx、colorname 规定表格的背景颜色。
background url 规定表格的背景图片。
border px 规定表格边框的宽度。
cellpadding px、% 规定单元格边框与其内容之间的空白。
cellspacing px、% 规定单元格之间的空隙。
td相关属性
属性 值 描述
width px、% 规定单元格的宽度。
height px、% 规定单元格的高度。
align left、center、right 规定单元格内容的对齐方式。
valign top、middle、bottom 规定单元格内容的垂直对齐方式。
bgcolor rgb(x,x,x)、#xxxxxx、colorname 规定单元格的背景颜色。
background url 规定单元格的背景图片。
rowspan number 规定单元格合并的行数
colspan number 规定单元格合并的列数 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表格标签</title>

</head>

<body>

<table width="400px" border="1" align="center" cellpadding="10px" cellspacing="1px">

    <tr bgcolor="#7fff00" align="center">

        <th>姓名</th>

        <th>年龄</th>

        <th>部门</th>

        <th>业绩</th>

    </tr>

    <tr align="center">

        <td>张三</td>

        <td>18</td>

        <td>外交部</td>

        <td>87</td>

    </tr>

    <tr align="center">

        <td>李四</td>

        <td>20</td>

        <td rowspan="2">销售部</td>

        <td>93</td>

    </tr>

    <tr align="center">

        <td>王五</td>

        <td>19</td>

        <td>89</td>

    </tr>

</table>

<table width="400px" border="1" align="center" cellpadding="10px" cellspacing="1px">

    <thead bgcolor="#7fff00" align="center">

        <th>姓名</th>

        <th>年龄</th>

        <th>部门</th>

        <th>业绩</th>

    </thead>

    <tbody>

        <tr align="center">

        <td>张三</td>

        <td>18</td>

        <td>外交部</td>

        <td>87</td>

    </tr>

    <tr align="center">

        <td>李四</td>

        <td>20</td>

        <td rowspan="2">销售部</td>

        <td>93</td>

    </tr>

    <tr align="center">

        <td>王五</td>

        <td>19</td>

        <td>89</td>

    </tr>

    </tbody>

</table>

</body>

</html>
代码效果图如下：

4 HTML表格标签的更多相关文章

  1. H5 表格标签的其它标签

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. H5 表格标签基本使用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. HTML常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  4. 9月6日表格标签（table、行、列、表头）（补）

    一.<table> <table>代表表格标签.   <table></table> 1.width  表示表格宽度,宽度表达方式有像素和百分比两种.网 ...

  5. PHP入门 - - 06-->HTML的表格标签

    表格标签<table> <table>的属性: Align: left, center, right          (表格的)位置 Border:              ...

  6. 透明、圆角、阴影效果、背景色渐变、<a></a>去外层虚线、！！！表格标签<table>

    表格标签 <table> 代表表格 width:指表格的宽度           一种是像素 (浏览器缩小的时候出现滚动条)           一种是百分比(跟着浏览器的大小而大小) b ...

  7. HTML的表格标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. HTML表格标签

    table标签的用途: 在表格中放图片,或用于布局(已经淘汰掉了),存放数据 table制作过程: 1.先分析表格有多少行 2.分析有多少列 3.做好表格的基本之后再添加表格需要的一些属性 table ...

  9. html系列教程--span style 及表格标签 title video

    <span> 标签:非块状元素,用于文本描述 <style> 标签:内联样式表标签定义样式信息,必须写明type类型为text/css,建议写在head中,不是必须 demo: ...

  10. HTML表格标签的使用-&lt;table&gt;

    <html> <head> <title> 表格标签 </title> <!-- 标签名:table 定义一个表格 子标签:<caption ...

随机推荐

  1. C++ STL学习

    C++ STL学习 目录 C++ STL学习 容器库概览 对可以保存在容器中的元素的限制 容器支持的操作 所有容器都支持的操作或容器成员 迭代器 迭代器的公共操作 迭代器的类型 迭代器的const属性 ...

  2. Mybatis-Plus自动生成代码的CodeGenerator代码

    官方地址:Mybatis-Plus:https://mp.baomidou.com/guide/generator.html pom中导入mybatis plus的jar包,因为后面会涉及到代码生成, ...

  3. 【系统选型】OA需求分析，OA系统选型及各供应商对比。

    去年公司内部做OA信息化升级,需要更新换代一下OA系统,当时OA选型整理下来的资料分享一下. 需求调研整理后如下: 一共四个模块需要更新&升级 :  OA模块(包括行政) + 合同模块 + 费 ...

  4. 简单看下最近的Spring Secrurity、Spring漏洞（CVE-2024-22234、CVE-2024-22243）

    最近的这两个cve我看国内很多情报将其评为高危,所以想着去看看原理,看完发现都比较简单,利用要求的场景也相对有限(特别是第一个),所以就随便看下就行了 Spring Security 用户认证绕过(C ...

  5. 【LeetCode二叉树#16】二叉（搜索）树的最近公共祖先（递归后序遍历，巩固回溯机制）

    二叉树的最近公共祖先 力扣题目链接(opens new window) 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先. 百度百科中最近公共祖先的定义为:"对于有根树 T 的两个结点 ...

  6. 【Azure 应用服务】如何关掉App Service/Function App的FTP部署, 使之变成FTPS

    问题描述 如何关掉App Service/Function App的FTP部署, 使之变成FTPS方式呢? 问题解答 在应用服务/函数应用的配置下选择右边的常规设置,然后修改FTP状态为"仅 ...

  7. 关于centos安装32位兼容库找不到依赖包的问题

    可以看这个博主写的  https://blog.csdn.net/ai74le/article/details/87195077

  8. 1. zookeeper简介与应用场景

    1.1 zookeeper介绍   zookeeper是一个高可用的分布式管理与协调框架,基于ZAB算法(原子消息广播协议)的实现. 能够很好保证分布式环境中数据的一致性.正是基于这样的特性,使得zo ...

  9. WINDOWS.H already included. MFC apps must not #include Windows.h

    做C++.C#和C++/CLI的混合编程有一段时间了,填了不少的坑. 今天又遇到一错误,想着挺容易就解决,估计是大脑疲惫,折腾许久才找到原因. 错误: 错误 C1189 #error: WINDOWS ...

  10. 元宇宙解决方案——云端GPU在元宇宙中的作用

    GPU算力可以说是我们现在信息化时代的基础设施,在某种程度上说我们已经进入了算力时代,手机.电脑.车载等算力已经渗透到各行各业了. 当然算力对元宇宙也很重要,尤其是在可视化方面,元宇宙需要很逼真的渲染 ...