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

智能推荐

html 图片缩放控件,img图片放大控件 lightbox.js-程序员宅基地

文章浏览阅读193次。【SQL Server】数据库是单个用户的 无法顺利进行操作 怎么解决1.打开数据库 2.新建查询 ,输入以下的SQL 语句 DECLARE @SQL VARCHAR(MAX); SET @SQL='' SELECT @SQL=@SQL+'; KILL '+RTRIM( ...泛函编程(10)-异常处理-Either上节我们介绍了新的数据类型Option:一个专门对付异常情况出现时可以有一致反应..._html 图片缩放控件

阿里云ECS Linux 如何查看Tomcat启动后的端口号_阿里云tomcat查看端口-程序员宅基地

文章浏览阅读1.9k次。1、先到tomcat配置文件查看tomcat的端口是什么,配置文件一般是:$CATALINA_HOME/conf/server这个文件,查找 这一行。这里,端口是8080。 2、使用netstat 命令查看占用情况 netstat -ap |grep 8080 //查找tomcat端口是否被占用 3、其他 netstat -tln //表示以数字形式查看正在监听的端口netsta..._阿里云tomcat查看端口

鸿蒙系统海外发布,华为海外申请鸿蒙系统商标,正式发布的日子还会远吗?-程序员宅基地

文章浏览阅读243次。据gsmarena消息,华为已向欧盟知识产权局提交商标申请,将华为的自主研发操作系统鸿蒙OS申请商标为“Harmony”,具体的申请日期为2019年7月12。此外之前出现的“Ark”,将成为鸿蒙系统在全球市场上的代号。值得一提的是,这一项申请的备注是移动操作系统;电脑操作系统;可下载的操作系统程序。也就是说,根据此前华为的表态,鸿蒙系统是为物联网开发的,主要是用于自动驾驶、远程医疗等低时延场景。然..._面向国外系统备注

android studio直接运行react-native项目时报错,react-native run-android正常_android studio terminal无法实现rn-程序员宅基地

文章浏览阅读1.1k次。android studio直接运行react-native项目时报错make sure you're either running a metro server(run 'react-native start')解决办法:You haven't started the bundler yet. Runnpm startorreact-native startin the ro..._android studio terminal无法实现rn

eclipse c++ 常用快捷键_eclipse c++ 开发 快捷键-程序员宅基地

文章浏览阅读3.7k次。atl+/ //自动补全ctrl+/ //注释,或者去注释ctrl+shift+F //代码整理F3 或者 ctrl+鼠标左键 //跳转到定义或者声明F2 //tooltip显示定义atl+left // 向后定位atl+right //向前定位_eclipse c++ 开发 快捷键

iis隐藏.php后缀,iis隐藏index.php-程序员宅基地

文章浏览阅读193次。iis隐藏index.php的方法:首先安装微软的URL Rewrite模块;然后查看url重写模块;接着点击导入规则;最后填入重写规则,并点击右侧“应用”提交即可。推荐:《PHP视频教程》该方法适用于所有品牌电脑。iis隐藏index.php方法:1.先安装微软的URL Rewrite模块 网址是https://www.iis.net/downloads/microsoft/url-rewrit..._宝塔iis伪静态隐藏后缀

随便推点

linux uvc协议_UVCCamera-master-程序员宅基地

文章浏览阅读261次。文件名大小更新时间UVCCamera-masterUVCCamera-master\.gitignore9412017-04-17UVCCamera-master\.ideaUVCCamera-master\.idea\compiler.xml6862017-04-17UVCCamera-master\.idea\encodings.xml1592017-04-17UVCCamera-master..._uvcpreview.cpp 下载

Flutter中使用GridView显示图片出现图片未填充满问题_flutter的image.network使用boxfit.contain后宽度不全-程序员宅基地

文章浏览阅读1.6k次。1、问题描述:Flutter中使用GridView显示图片出现图片未填充满问题2、解决办法:Image组件设置三个属性即可填充满fit: BoxFit.cover,width: double.infinity,height: double.infinity,3、代码样式: Image( fit: BoxFit.cover, width: doub..._flutter的image.network使用boxfit.contain后宽度不全

基于Processing的动画交互_processing交互作品源代码-程序员宅基地

文章浏览阅读1.5w次,点赞30次,收藏259次。基于processing的动画交互基本介绍总览结果分部设计及源代码1、 添加字体2、球随鼠标3、两个对象之间的引力4、小型粒子系统心得想法基本介绍大致看了《代码本色》这本书之后,在原有的编程经验的基础上,对于在processing中添加交互有了心得认识,于是按照老师要求,写了一个简单的动画交互系统。整个系统运用了《代码本色》中力、震荡、粒子系统三大章,生成了各自独立的三个小场景,通过键盘的交..._processing交互作品源代码

批量图片压缩、生成PDF文件及PDF文件压缩_照片压缩pdf-程序员宅基地

文章浏览阅读1.7k次。工做任务:每次将若干张JPG图片(每张图片文件0.5M~1M,图片尺寸A4纸尺寸大小),合并成小于1M的PDF文件,并保证一定的清晰度。一、PDF压缩工具1、FoxitPDFEditor软件——文件——PDF优化——优化扫描的PDF,输出结果比较清晰,但PDF文件仍达4M,达不到要求。2、PDF Compressor pro软件,虽然压缩速度较快,但输出文件大小仍达3M以上。二、对图片进行..._照片压缩pdf

计算机上的32位是什么意思啊,解答32位是什么意思-程序员宅基地

文章浏览阅读2.6w次,点赞11次,收藏27次。近来有不少网友询问电脑中的32位是什么意思。我们在安装操作系统的时候,经常会被问到电脑是32位还是64位这个问题,可是我们连32位的意思都不懂,怎么能选择一个合适的操作系统呢?对此,我给大家整理了32位的相关介绍,赶紧来瞧瞧吧现在家家户户都配置了电脑,但是很多朋友对于电脑方面的知识却不怎么了解。比如现在的电脑分为32位和64位。有些小伙伴不知这是什么意思。接下来,我就给大家介绍一下32位到底是什么..._32位是什么意思

FFT并行算法与应用-基于MPI(三)-程序员宅基地

文章浏览阅读7.8k次,点赞2次,收藏14次。给出针对一维FFT的并行计算方法,并针对其加以分析推广到二维FFT的计算中。 并行FFT算法: (1)计算长度为p和n/p2的按位倒置序列; (2)进行处理机内部的数据交换和外部的数据交换; (3)在每个处理机中计算长度为s的FFT交换; (4)将这些长度为s的FFT变换合成为长度为n的FFT变换;代码:#include #include #include #inc_fft并行算法