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

智能推荐

Sample Probability Space_probability space例题-程序员宅基地

文章浏览阅读66次。Sample Probability SpaceA simple probability space consist of a tuple (Ω\OmegaΩ,ε\varepsilonε,p)Ω\OmegaΩ is a finite set (with cardinality k= ∣\mid∣Ω\OmegaΩ∣\mid∣)ε\varepsilonε = { A : A ⊆\subseteq⊆ Ω\OmegaΩ } consist of all finite subsetsEach events _probability space例题

python分布式服务系统框架_Cola:一个分布式爬虫框架 - 系统架构 - Python4cn(news, jobs)...-程序员宅基地

文章浏览阅读348次。由于早先写的WeiboCrawler问题很多,而且当时我有提到,其实可以实现一个通用的爬虫框架。最近由于要抓取新的数据,于是我就写了这个cola。下面的文字来自wiki。Cola是一个分布式的爬虫框架,用户只需编写几个特定的函数,而无需关注分布式运行的细节。任务会自动分配到多台机器上,整个过程对用户是透明的。依赖由于Cola配置文件使用的yaml,所以Cola只依赖于pyyaml,安装easy_i..._cola爬虫

名悦集团国庆出行自驾游攻略-程序员宅基地

文章浏览阅读75次。在这个买车已经不是什么难事的年代,大多数人出行都会选择自驾方式,但自驾出游必然要面临一系列的问题以及做足准备工作。名悦集团小编给大家总结出了这次国庆假期出行自驾游攻略,为了保证自驾过程的安全顺利,玩得更加痛快,临行前的车辆检查时必不可少的,这些项目可以自己检查,如果实在是懒或者不懂,可以在临行前去4S店做个基础保养,以让爱车在最佳车况陪伴自己和家人朋友开始这段愉快的旅程。1.轮胎轮胎的检查是自驾前需要关键的检查之一,在自驾的旅程上不管是轮胎没气还是爆胎,都是非常令人揪心的,如果是在高速或者...

Android 输入法框架源码分析总结(1)_android 输入法源码-程序员宅基地

文章浏览阅读3.6k次,点赞3次,收藏7次。参考文档 https://blog.csdn.net/huangyabin001/article/details/28434989https://blog.csdn.net/huangyabin001/article/details/28435093#commentshttps://blog.csdn.net/jieqiong1/article/details/712629871..._android 输入法源码

Ubuntu下使用nnUNet 训练自己的数据集(只管实现,不讲原理,通俗易懂)_nnunet训练自己的数据集-程序员宅基地

本文介绍了如何在Ubuntu下使用nnUNet训练自己的数据集,不涉及原理解析,只提供实现步骤。包括nnUNet简介、修改训练参数和文件位置等操作。详细内容可参考Tina的博文。

SSM实现秒杀系统案例-程序员宅基地

文章浏览阅读9.9k次,点赞10次,收藏88次。对于抢购系统来说,首先要有可抢购的活动,而且这些活动具有促销性质,这种大型活动的负载可能是平时的几十倍,所以通过增加硬件、优化瓶颈代码等手段是很难达到目标的,所以抢购系统得专门设计。在这里我们说的库存不是真正意义上的库存,其实是该促销可以抢购的数量,真正的库存在基础库存服务。用户点击『提交订单』按钮后,在抢购系统中获取了资格后才去基础库存服务中扣减真正的库存;而抢购系统控制的就是资格/剩余数。传统方案利用数据库行锁,但是在促销高峰数据库压力过大导致服务不可用,目前采用redis集群(16分片)缓存促销信息,

随便推点

正则表达式匹配各种括号内内容_正则表达式 匹配多个括号-程序员宅基地

文章浏览阅读2.8w次,点赞10次,收藏9次。用正则表达式匹配两个字符中间的文本String skh ="(?<=\\《)[^\\》]+";//用于匹配《》里面的文本String str="但实际上《kajdwdej》孙大伟多";//测试字符串Pattern pattern=Pattern.compile(skh); Matcher matcher=pattern.matcher(str); boolean is=matche_正则表达式 匹配多个括号

Android 中的Shape_linear radial sweep分别代表的什么-程序员宅基地

文章浏览阅读553次。之前一直看项目用过这个东西,但是自己都不怎么熟悉,大概就知道可以画一些圆角之类的~ 今天就来好好了解一下吧~Shape里面有很多属性,依次学习一下第一步~首先来写一个Button这个布局文件就不贴了...太简单了~ (PS:说贴出来的站出来,我保证不打死你!)接下来开始学习第一个属性:Solid:(填充)在Drawable里面创建一个butt_linear radial sweep分别代表的什么

graphpad细胞增殖曲线_如何用GraphPad Prism绘制剂量反应曲线?-程序员宅基地

文章浏览阅读6.1k次。上图是Sci文献中的dose–response curves (剂量反应曲线),横坐标是药物GS-Se-SG浓度的对数值,纵坐标是Rrelative cell viability(相对细胞活性,% of control),从图注中可以知道IC50为5.1 μM。那么什么是IC50呢?IC50 (half maximal inhibitory concentration)是指被测量的拮抗剂的半抑制浓..._graphpad细胞增殖曲线

二叉查找树(非递归、递归遍历)_二叉排序树非递归查找-程序员宅基地

文章浏览阅读658次。二叉查找树(含递归、非递归遍历)_二叉排序树非递归查找

spark-sql 查询报错:Invalid method name: ‘get_table_req‘_invalid method name: 'get_table_req-程序员宅基地

文章浏览阅读3.1k次。spark-sql> select * from zps_d001 limit 1;Error in query: org.apache.hadoop.hive.ql.metadata.HiveException: Unable to fetch table zps_xxx. Invalid method name: 'get_table_req'org.apache.spark.sql.AnalysisException: org.apache.hadoop.hive.ql.metadata.H_invalid method name: 'get_table_req

unknown mutation type:-程序员宅基地

文章浏览阅读1.7w次。我这边使用得是vue+elementvue得状态组成actions 这个是异步请求 通过异步请求得话 然后在调用 mutations.jsmutations.js 将数据提交到这里 this.$commit(‘test’,testTemp)index.js 这个是将数据初始化getters 这个是将 this.$store.getters.test 就能获取到了 testTemp写法是这个写法最后得原因是因为我这在 index.js 和mutation.js 为定义常量##_unknown mutation type

推荐文章

热门文章

相关标签