HTML表格(HTML 表格的使用,收藏这一篇就够了)-程序员宅基地

技术标签: HTML  html  

HTML 表格

1. 表格的定义

<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 <tr><th><td> 元素组成表格结构;其中: <tr> 元素定义表格行,<th> 元素定义表头,<td> 元素定义表格单元。
为了让表格更美观,我们会用到:border,colspan,rowspan,align,bgcolor 等来美化表格,具体在本文都有讲解;

2. 表格的标签

在HTML定义表格的时候,有以下标签供我们使用

NO 表格标签 用处
1 <table> 定义表格,生成的表格在一对<table></table>中;
2 <caption> 定义表格标题,当表格需要标题时,使用<caption>表格标题</caption>
3 <thead> 定义表格的页眉
4 <tbody> 定义表格的主体
5 <tfoot> 定义表格的页脚
6 <th> 定义表格的表头,一般是表头中的内容会被加黑;
7 <tr> 定义表格的行
8 <td> 定义表格单元格
9 <col> 定义用于表格列的属性
10 <colgroup> 定义表格列的组

3. 单元格边框(border)

表格边框:在使用<table border="1"></table> 的方式来定义,其中:数字表示边框的宽度,单位为像素;以下举三个边框的例子;

<!--无边框-->
<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>马里奥</td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td>桃花公主</td>
        <td></td>
    </tr>

</table>

<br>
<!--边框宽度为2-->
<table border="2">
    <tr>
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>马里奥</td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td>桃花公主</td>
        <td></td>
    </tr>

</table>
<br>

<!--边框宽度为10-->
<table border="10">
    <tr>
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>马里奥</td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td>桃花公主</td>
        <td></td>
    </tr>

</table>

上述代码效果:
在这里插入图片描述

4. 合并单元格

合并单元格时,合并行使用:colspan=“2”; 合并列使用:rowspan=“2” (这里的 ‘2’ 表明合并两个单元格),举例如下:

4.1 合并行单元格(colspan)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格合并单元格--张凯</title>
</head>
<body>

<h4>合并行单元格:</h4>
<table border="1">
<caption>通讯录</caption>
<tr>
  <th>姓名</th>
  <th colspan="2">邮箱</th>
</tr>
<tr>
  <td>zhang kai</td>
  <td>[email protected]</td>
  <td>[email protected]</td>
</tr>
</table>

</body>
</html>

上述代码效果:
在这里插入图片描述

4.2 合并列单元格(rowspan)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格合并单元格--张凯</title>
</head>
<body>

<h4>合并列单元格:</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="3">邮箱</th>
  <td>[email protected]</td>
</tr>
<tr>
  <td>[email protected]</td>
</tr>
<tr>
  <td>[email protected]</td>
</tr>
</table>

</body>
</html>

上述代码效果:
在这里插入图片描述

5. 表格格式设置

5.1 单元格的对齐(align)(居中,左对齐,右对齐)

在对应的标签上增加 align 键值对,生效方式为"就近原则",如下例中,桃花公主单元格为left生效;

align 值 left center right
效果 左对齐 居中 右对齐
<table width="600" border="2">
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left">马里奥</td>
        <td align="right"></td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td></td>
    </tr>
</table>

上述代码效果(为了看清效果,所以设置了表格宽度 width=“600” ):
在这里插入图片描述

5.2. 背景色&图片(bgcolor & background)

  • 添加背景色使用:bgcolor
  • 添加背景图片使用:background
5.2.1 单元格背景色&图片

在单元格的标签上增加 bgcolor 或者 background,就可以添加背景色或者背景图片,以背景色为例;

<table width="600" border="2">
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left" bgcolor='red' >马里奥</td>
        <td align="right"></td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td></td>
    </tr>
</table>

上述代码效果:
在这里插入图片描述

5.2.2 表格背景色&图片

在表格的标签上增加bgcolor 或者 background,就可以添加背景色或者背景图片,以背景图片为例;

<table width="600" border="2" background='https://p1.ssl.qhimgs1.com/sdr/400__/t01f04c2504aa62bab7.gif'>
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left">马里奥</td>
        <td align="right"></td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td></td>
    </tr>

</table>

上述代码效果(由于我挑了一张动态图,所以这里的背景是动态的!):
在这里插入图片描述

5.3 单元格的边距(cellpadding)

<table></table>标签使用cellpadding 即可,方法与上面的图片一样,直接举例如下:

<table width="600" border="2" cellpadding="8">
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left" bgcolor='red' >马里奥</td>
        <td align="right"></td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td></td>
    </tr>
</table>

上述代码效果:
在这里插入图片描述

5.4 单元格间的距离(cellspacing)

<table></table>标签使用 cellspacing 即可,方法与上面的图片一样,直接举例如下:

<table width="600" border="2" cellspacing="8">
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left" bgcolor='red' >马里奥</td>
        <td align="right"></td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td></td>
    </tr>
</table>

上述代码效果:
在这里插入图片描述

5.5 显示部分边框(frame & rules)

  • 可以在<table></table>标签内,增加 frame 键值对,控制表格外边框;键值对对应关系如下:
frame 键值 效果
void 不显示外侧边框
above 显示上部的外侧边框
below 显示下部的外侧边框
hsides 显示上部和下部的外侧边框
vsides 显示左边和右边的外侧边框
lhs 显示左边的外侧边框
rhs 显示右边的外侧边框
box 在所有四个边上显示外侧边框
border 在所有四个边上显示外侧边框
  • 可以在<table></table>标签内,增加 rules 键值对,控制表格外边框;键值对对应关系如下:
frame 键值 效果
none 没有线条
groups 位于行组和列组之间的线条
rows 位于行之间的线条
cols 位于列之间的线条
all 位于行和列之间的线条
  • frame 举例如下:
<table width="600" cellspacing="8" frame="box">
    <tr align="center" >
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center" >1</td>
        <td align="left" bgcolor='red' >马里奥</td>
        <td align="right"></td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td></td>
    </tr>
</table>

输出效果:
在这里插入图片描述

  • rules举例如下:
<table width="600" cellspacing="8" rules="cols">
    <tr align="center" >
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center" >1</td>
        <td align="left" bgcolor='red' >马里奥</td>
        <td align="right"></td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td></td>
    </tr>
</table>

输出效果:
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_47139649/article/details/109099704

智能推荐

Linux一个内存大页多大,Linux中的“大内存页”(hugepage)是个什么?-程序员宅基地

文章浏览阅读803次。学习 Linux 中的大内存页hugepage。理解什么是“大内存页”,如何进行配置,如何查看当前状态以及如何禁用它。本文中我们会详细介绍大内存页huge page,让你能够回答:Linux 中的“大内存页”是什么?在 RHEL6、RHEL7、Ubuntu 等 Linux 中,如何启用/禁用“大内存页”?如何查看“大内存页”的当前值?首先让我们从“大内存页”的基础知识开始讲起。Linux 中的“大..._内存大页一般多大

location.href 实现点击下载功能-程序员宅基地

文章浏览阅读7.9k次。如果页面上要实现一个点击下载的功能,传统做法是使用一个 a 标签,然后将该标签的 href 属性地址指向下载文件在服务端的地址(相对地址或者绝对地址),比如这样:能这样实现是因为,在浏览器地址栏输入一个文件地址,如果该文件能在浏览器上打开,那么就直接打开,比如 html 文件,jpg文件等;但是如果该文件不能在浏览器上打开,就会变为下载。但是有时候这样做会显得有点复杂。比如说我在一个移动端页..._ios 的 location.href 能下载文件嘛

新塘N76E003红外遥控解码程序_n76e003做遥控器发射程序-程序员宅基地

文章浏览阅读5k次。 一直用的STM8S003的单片机,后来价格涨到三块多不得不换。拿上新塘N76E003芯片,资源中规中矩,相比用习惯Cortex M 内核微控制器和STM8,用这个芯片资源就有些少了,先来个简单的红外遥控解码。(打算用外部IO中断来触发解码的,调试时发现会无规律的触发IO中断,只得用IO扫描方式去解红外遥控信号。)以日本NEC的编码协议组成: 引导码,16bit用户码(地址码),8b..._n76e003做遥控器发射程序

ReentrantLock使用示例_reentrantlock用法示例-程序员宅基地

文章浏览阅读612次。import java.util.concurrent.locks.Lock;import java.util.concurrent.locks.ReentrantLock;public class ExplicitLockInfo { private static final Lock lock = new ReentrantLock(); private static int sharedData = 0; public static void main(String[._reentrantlock用法示例

程序猿容易轻视的注释和送礼的八项原则_程序员给领导送礼-程序员宅基地

文章浏览阅读869次,点赞4次,收藏2次。送礼虽然事小,但是情商却一见高低,解密程序猿必须了解的八项送礼原则!_程序员给领导送礼

Python socket解析HTTP请求内容_python的socket收到的前端内容是请求头-程序员宅基地

文章浏览阅读3k次。思路:1. 解析HTTP请求的头部 HTTP请求头部的结束符行为"\r\n",可以按行读取HTTP请求头的内容,如果读到一行为"\r\n",说明HTTP请求头结束。2.请求头里面含有Content-Length参数 如果HTTP请求里面有Content-Length参数,说明HTTP请求的内容大小是确定的,请求直接读取Content-Length的值,然后读取相应字节的的内容..._python的socket收到的前端内容是请求头

随便推点

鸿蒙系统公测第一期,幸福来得太突然!鸿蒙系统 2.0 第二轮公测开启,内附申请方法...-程序员宅基地

文章浏览阅读478次。距离华为鸿蒙系统第一次公测已过去一段时间,小伙伴们升级后纷纷表示「很香」。全新系统带来的崭新体验,让没能升级的教授跃跃欲试。就在昨晚,HarmonyOS 2.0 开发者 Bata 公测招募第二期开启啦~终于等到你!公测新增机型第二期公测新增了七款机型:华为 nova 6、华为 nova 6 5G 、华为 nova 7 5G、华为 nova 7 Pro 5G、华为 nova 8、华为 nova 8 ..._naiyou001.tk/华为鸿蒙安装谷歌框架/

我,一个在互联网苟且着的高龄程序员,终究迎来了我的“35”_高龄程序员对互联网的-程序员宅基地

文章浏览阅读192次。似乎上了点年纪的人,正遭遇非常严重的危机,很多人难以自持的忧虑起来:难道软件和互联网,真的容不下我们这些大龄青年?难道35岁,真的就是我们的绝命杀?有点遗憾的告诉大家,35岁这个年龄,是大约75%互联网人的绝命杀。为什么这么说?因为对于像程序员这样的IT从业者来讲,35岁会面临3个大坎:精力坎时间坎性价比坎精力坎所谓精力坎,说的是,人到了奔四这个阶段,精力自然而然开始下降,不如二十郎当岁的小伙子。二十来岁的小伙子,熬一夜第二天照样可以再战,而三十五六的伪中年,一个通宵休息三五天过不来。._高龄程序员对互联网的

webpack环境变量与vue-cli3设置环境变量_defineplugin定义环境变量-程序员宅基地

文章浏览阅读3k次。1、在业务代码中使用环境变量(DefinePlugin)DefinePlugin的正确用法DefinePlugin中的每个键,是一个标识符或者通过.作为多个标识符。如果value是一个字符串,它将会被当做code片段如果value不是字符串,它将会被stringify(包括函数)如果value是一个对象,则所有key的定义方式相同。如果key有typeof前缀,它只是对typeof..._defineplugin定义环境变量

zip批量导入java,Eclipse,Java:如何以zip格式导入库?-程序员宅基地

文章浏览阅读139次。Ok, this is basic, but it seems that the normal way of doing this doesn't work for me.I'm trying to import the jSSC library, for communication with serial ports etc. The newest library is jSSC-0.9.0-R..._java批量导入zip

rpc error: code = 2 desc = oci runtime error: exec failed: container_linux.go:247: starting containe-程序员宅基地

文章浏览阅读1w次。问题由于Docker 安装的比较老,docker exec -it test bash 存在Bug问题如下:rpc error: code = 2 desc = oci runtime error: exec failed: container_linux.go:247: starting container process caused "process_linux.go:110: d..._rpc error: code = 2 desc = oci runtime error: exec failed: container_linux.g

想要秒变“优牙人”,只需要uya.ren-程序员宅基地

文章浏览阅读592次。最近“牙”可是大火接二连三的喜上热搜前有乘风破浪的姐姐们招商图曝光却现脸垮口红粘牙后有沙雕男孩黄子韬吃饭咬断临时牙齿#黄子韬 照亮全场的大牙#冲上微博热搜既然牙齿如此重要这家uya.ren就很有必要了解一下了Dang Dang Danguya.ren——牙齐齐来了!牙齐齐前身是一家牙齿正畸的远程医疗服务平台但空中医疗并不能真正解决患者的问题于是改变思路,从互联网医疗转向线下布局目前是专注牙科行业发展解决方案的互联网医疗平台._uya.ren