web前端开发零基础入门6（关于HTML表格）

已于 2022-07-08 22:50:12 修改
阅读量1.6k 收藏 26
点赞数 3
分类专栏： web前端开发 文章标签： 前端 html 学习
于 2022-07-07 23:20:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62512326/article/details/125668846
版权

文章目录


这两天浅学了一下表格，下面来小小总结一下

一.表格的定义

table 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th或 td元素组成表格结构；其中： tr>元素定义表格行，th 元素定义表头，td 元素定义表格单元。
为了让表格更美观，我们会用到：border，colspan，rowspan，align，bgcolor 等来美化表格。

二.表格的标签

之前我们说过在VS里面使用的标签，比如什么meta标签啊。
在下面这个链接里面有我详细说明的：

http://t.csdn.cn/XGKeQ

三.单元格边框(border)

表格边框：在使用table border=“1” /table 的方式来定义，其中：数字表示边框的宽度，单位为像素，下面有一个我写的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <table border="1" cellspacing="0" align="center">
        <caption><font size="20" color="pink" ><h3 align="center">成绩单</h3></font></caption>
        <tr>
            <th width="100" height="40" bgcolor="aqua" align="center">学号</th>
            <th width="100" height="40" bgcolor="aqua" align="center">姓名</th>
            
            <th width="100" height="20" bgcolor="pink" align="center" conspan="3" >平时成绩 </th>
            
            <th width="100" height="40" bgcolor="aqua" align="center">期末成绩</th>
            
            <th width="100" height="40" bgcolor="aqua" align="center">总成绩</th>
        
        </tr>
        <th width="100" height="40" bgcolor="aqua" align="center">001</th>
        <th width="100" height="40" bgcolor="aqua" align="center">ZZZ</th>
        <th width="100" height="40" bgcolor="aqua" align="center">90</th>
        <th width="100" height="40" bgcolor="aqua" align="center">90</th>
        <th width="100" height="40" bgcolor="aqua" align="center">180</th>
        
        <tr>

        </tr>
    </tr>
    <th width="100" height="40" bgcolor="aqua" align="center">002</th>
    <th width="100" height="40" bgcolor="aqua" align="center">LLL</th>
    <th width="100" height="40" bgcolor="aqua" align="center">80</th>
    <th width="100" height="40" bgcolor="aqua" align="center">100</th>
    <th width="100" height="40" bgcolor="aqua" align="center">180</th>
    <tr>
        

    </tr>
    <th width="100" height="40" bgcolor="aqua" align="center">003</th>
    <th width="100" height="40" bgcolor="aqua" align="center">WWW</th>
    <th width="100" height="40" bgcolor="aqua" align="center">100</th>
    <th width="100" height="40" bgcolor="aqua" align="center">90</th>
    <th width="100" height="40" bgcolor="aqua" align="center">190</th>
    <tr>

    
    </table>
    
</body>
</html>

在这里插入图片描述

四.合并单元格

1.合并行单元格（colspan）

合并单元格时，合并行使用：colspan=“2”； 合并列使用：rowspan=“2” （这里的 ‘2’ 表明合并两个单元格），举例如下：

<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>张力文</td>
  <td>123456@qq.com</td>
  <td>123456@163.com</td>
</tr>
</table>

</body>
</html>

在这里插入代码片

在这里插入图片描述

2.合并列单元格（rowspan）

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

<h4>合并列单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>张力文</td>
</tr>
<tr>
  <th rowspan="3">邮箱</th>
  <td>123456@qq.com</td>
</tr>
<tr>
  <td>123456@163.com</td>
</tr>
<tr>
  <td>123456@sina.com</td>
</tr>
</table>

</body>
</html>

在这里插入图片描述

五.表格格式设置

在这里插入图片描述

<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>

在这里插入图片描述

六.背景色&图片（bgcolor & background）

我们通常会直接使用meta标签，比如bgcolor=“aaa”。就会呈现我们想要的背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <table border="1" cellspacing="0" align="center">
        <caption><font size="20" color="pink" ><h3 align="center">成绩单</h3></font></caption>
        <tr>
            <th width="100" height="40" bgcolor="aqua" align="center">学号</th>
            <th width="100" height="40" bgcolor="aqua" align="center">姓名</th>
            
            <th width="100" height="20" bgcolor="pink" align="center" conspan="3" >平时成绩 </th>
            
            <th width="100" height="40" bgcolor="aqua" align="center">期末成绩</th>
            
            <th width="100" height="40" bgcolor="aqua" align="center">总成绩</th>
        
        </tr>
        <th width="100" height="40" bgcolor="aqua" align="center">001</th>
        <th width="100" height="40" bgcolor="aqua" align="center">ZZZ</th>
        <th width="100" height="40" bgcolor="aqua" align="center">90</th>
        <th width="100" height="40" bgcolor="aqua" align="center">90</th>
        <th width="100" height="40" bgcolor="aqua" align="center">180</th>
        
        <tr>

        </tr>
    </tr>
    <th width="100" height="40" bgcolor="aqua" align="center">002</th>
    <th width="100" height="40" bgcolor="aqua" align="center">LLL</th>
    <th width="100" height="40" bgcolor="aqua" align="center">80</th>
    <th width="100" height="40" bgcolor="aqua" align="center">100</th>
    <th width="100" height="40" bgcolor="aqua" align="center">180</th>
    <tr>
        

    </tr>
    <th width="100" height="40" bgcolor="aqua" align="center">003</th>
    <th width="100" height="40" bgcolor="aqua" align="center">WWW</th>
    <th width="100" height="40" bgcolor="aqua" align="center">100</th>
    <th width="100" height="40" bgcolor="aqua" align="center">90</th>
    <th width="100" height="40" bgcolor="aqua" align="center">190</th>
    <tr>

    
    </table>
    
</body>
</html>

在这里插入图片描述
比如这里的“平时成绩”就是粉色（pink）和其他模块的不一样。

表格背景色&图片

在表格的标签上增加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>

在这里插入图片描述
在这里插入图片描述

七.单元格的边距（cellpadding）

在table标签使用cellpadding 即可，方法与上面的图片一样，直接举例如下：

<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>

在这里插入图片描述

八.显示部分边框（frame & rules）

|frame 键值 效果
void 不显示外侧边框
above 显示上部的外侧边框
below 显示下部的外侧边框
hsides 显示上部和下部的外侧边框
vsides 显示左边和右边的外侧边框
lhs 显示左边的外侧边框
rhs 显示右边的外侧边框
box 在所有四个边上显示外侧边框
border 在所有四个边上显示外侧边框

none 没有线条
groups 位于行组和列组之间的线条
rows 位于行之间的线条
cols 位于列之间的线条
all 位于行和列之间的线条

2022.7.8（改）

疯掉就疯掉吧
关注
  • 3
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
开放源代码的仿Excel的web表格控件（1.4）
12-23
本控件完全使用javascript编写，还在不断完善中。欢迎大家下载试用并提出改进意见。控件开放源代码。 1、支持上下左右键切换单元格焦点； 2、支持backspace删除整行功能：把焦点移到最后一个单元格，按backspace键可以从行尾删到行首； 3、支持alt+x删除焦点所在行； 4、支持焦点设置功能； 5、表头无限制，任意设置； 6、支持计算功能； 7、支持行的隐藏值，初始化的时候在xml最后面多增加一列，这个值会被放到隐藏值里面，获取数据的时候也同样是最后一列； 8、支持获取列的合计功能，方法见getSum； 9、行和列的索引起始值统一为1，序号列和表头行不在索引中； 10、支持多种浏览器，合并XML解析函数，不再需要ajax.js；
Web小案例——表格实现
qq_42000660的博客
07-03 1553
一、绘制一个表格 1、代码实现结构： table表示表格标签，tr表示行标签，td表示一个单元格,th表示表头的一个单元格（与td不同的是文字样式是加粗的） <table> <tr> <th>表头</th> <tr> <tr> <td>单元格</td> <tr> </table> 2、案例： <table&
【HTML】如何使用html制作一个简易的表格？
最新发布
萌萌白白的博客
02-16 3463
如何使用html制作一个简易的表格
WEB前端网页设计-Bootstrap5 表格
君逍遥o
04-30 1890
WEB前端网页设计-Bootstrap5 表格
Web前端之表格
花&败
10-29 5362
同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格在table中使用tr表示表格中的一行，有几个tr就有几行在tr中使用td表示一个单元格，有几个td就有几个单元格rowspancolspan。
WEB入门二 表格和表单
张晨光老师的播客
02-14 7584
学习内容Ø表格的作用和制作Ø表单的制作能力目标Ø掌握表格的创建Ø掌握设置表格的常用属性；Ø理解表单的作用Ø熟练掌握表单常用元素本章简介表格对于网页制作而言极其重要，其最明显的优点是能够以行列整齐的形式来显示文本、数字、图片信息。而且，表格还可以用于固定文本或图像的显示位置。经常上网的用户会发现表格被大量
【web前端基础day02】表格table+表单form
qq_61971608的博客
01-16 3605
HTML over
web前端开发与应用——表格
m0_59742894的博客
11-29 2058
表格的基本标签 HTML表格由table标签以及一个或多个tr、th或td标签组成： table标签：定义一个表格 caption标签：定义表格标题，嵌套在<table></table>中 tr标签：定义表格中的一行，嵌套在<table></table>中 th标签：定义表格中的表头单元格，嵌套在<tr></tr>中 td标签：定义表格中的数据单元格，嵌套在<tr></tr>中 表格标签的基本属性
HTML笔记（二）
qwq_666的博客
12-18 388
表单 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单form</title> </head> <body> <!-- 1.表单有什么用？ 收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器 2.如何画表单 使用form标签画表单 3.一个网页当中可以有多个表单
零基础如何学好web前端开发.pdf
11-27
零基础如何学好web前端开发.pdf
头歌教学实践平台 Web前端开发基础 HTML-表格
01-20
头歌教学实践平台 Web前端开发基础 HTML——表格。源码txt格式。
web前端开发基础入门教程之HTML5 浏览器支持
01-08
甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的 HTML 元素。 将 HTML5 元素定义为块元素 HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是块级 元素。 为了能让旧版本的浏览器正确...
web前端基础入门开发教程之HTML5 Web 存储
01-08
HTML5 Web 存储 在HTML5之前，主要是使用cookies存储，cookies的缺点有：需要在请求头上带着数据，存储大小不过，在4k之内。本节， HTML5 web 存储，一个比cookie更好的本地存储方式。 什么是 HTML5 Web 存储? ...
Web前端攻城狮培养计划-前端零基础入门
09-21
Web前端攻城狮培养计划-前端零基础入门
HTML中的表格和表单（含有示例代码）
热门推荐
weixin_57197500的博客
05-20 4万+
表格 表格的基本构成标签 table标签：表格标签 caption标签：表格标题 tr标签：表格中的行 th标签:表格的表头 td标签：表格单元格 表格的基本结构 <table>定义表格 <caption>表格标题</caption> <tr>定义表行 <th>定义表头</th> </tr> <tr&g...
js前端，一个漂亮的自写表格table
hwlll的博客
05-10 2500
将th的 position设置为sticky，固定首行，也就是top=0，为其设置为一个区分的颜色。由于上面的滚动效果不好，看起来很卡顿，下面优化了滚动效果，加入缓动。然后利用timer定时器和scrollTop 属性设置滚动效果，table里的数据在data里返回，以下是实例数据。这样我们就拥有了一个没有样式的基础表格。
Web 前端学习之 表格
程序员小白的博客
09-29 4846
这里写自定义目录标题1. 1. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box { /*设置宽度*/ width: 100px; /*设置高度*/ height: 100px; background-color: yel
HTML第二章 “表格”详解 （附带详细代码与解释）！！！
a2499797637的博客
09-30 7955
1.表格的语法、2. 表格的可选标记、3. 表格的属性、4. 不规则的表格、5. 表格的大小
前端基础---表格table、表单form
xyue_的博客
04-22 988
前端—table表格、form表单 一、表格table 1.标签 （1）table 表格 （2）tr 表格行 （3）th 表头 （4）td 单元 2、css reset （1）table{border-collapse;} 单元格间隙合并 （2）th,td{padding:0;} 重置单元格默认填充 3、单元格合并 （1）colspan 横向合并 （2）rowspan 纵向合并 口诀： 一找（想要合并的第一个单元格） 二合（合并单元格） 三删除（将多余的单元格删除
web前端开发零基础入门
05-25
想要从零开始学习Web前端开发，你需要掌握以下几个方面： 1. HTML：HTML 是网页的基础语言，它定义了网页的结构和内容。学习 HTML 可以帮助你了解网页的基本结构和元素，以及如何使用标签、属性和样式来创建网页。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值