【HTML】之表格

最新推荐文章于 2022-12-19 14:48:35 发布
最新推荐文章于 2022-12-19 14:48:35 发布
阅读量91 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RuRu_Bai/article/details/115558887
版权

表格


以下学习内容来自B站
链接: B站.

一、基本结构

格式：

<table border=”像素” width=”宽度” height=”高度” align=”right/left/center”>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

二、合并单元格

①水平合并

<table border=”像素” width=”宽度” height=”高度” align=”right/left/center”>
	<tr>
		<td colspan=”合并的单元格个数数字”></td>
		<!--同时需要在该行删除对应个数的单元格-->
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

②垂直合并

<table border=”像素” width=”宽度” height=”高度” align=”right/left/center”>
	<tr>
		<td rowspan=”合并的单元格个数数字”></td>
		<!--同时需要在下面的几行删除对应个数的单元格-->
	</tr>
	<tr>
		<td></td>
	</tr>
</table>

三、表格属性

①表格标题

<caption>学生信息表</caption>

写在table下面一行，表示表格的标题。

②单元格间距

<table border="1" width="800" align="center" cellspacing="0">

其中 cellspacing="0"表示单元格间的距离为0。

③th

<th></th>跟类似，但是th中的内容自动加粗居中。

④单元格内容与边框距离

cellpadding="30"表示将每个单元格内容与边框的距离。

⑤背景颜色

<tr bgcolor="pink">表示背景颜色。

四、练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时代少年团TNT</title>
</head>

<body>
    <table border="1" width="700" align="center" cellspacing="0">
        <caption><strong>TNT</strong></caption>
        <tr align="center">
            <td bgcolor="yellow"><b>丁程鑫</b></td>
            <td>大漂亮</td>
            <td>大漂亮</td>
            <td>大漂亮</td>
            <td>大漂亮</td>
        </tr>
        <tr align="center">
            <td bgcolor="yellow"><b>马嘉祺</b></td>
            <td>小马哥</td>
            <td>小马哥</td>
            <td>小马哥</td>
            <td>小马哥</td>
        </tr>
        <tr align="center">
            <td bgcolor="yellow"><b>张真源</b></td>
            <td>张公子</td>
            <td>张公子</td>
            <td>张公子</td>
            <td>张公子</td>
        </tr>
        <tr align="center">
            <td bgcolor="yellow"><b>宋亚轩</b></td>
            <td>小轩轩</td>
            <td>小轩轩</td>
            <td>小轩轩</td>
            <td>小轩轩</td>
        </tr>
        <tr align="center">
            <td bgcolor="yellow"><b>贺峻霖</b></td>
            <td>贺老师</td>
            <td>贺老师</td>
            <td>贺老师</td>
            <td>贺老师</td>
        </tr>
        <tr align="center">
            <td bgcolor="yellow"><b>严浩翔</b></td>
            <td>小熊</td>
            <td>小熊</td>
            <td>小熊</td>
            <td>小熊</td>
        </tr>
        <tr align="center">
            <td bgcolor="yellow"><b>刘耀文</b></td>
            <td>小狼崽</td>
            <td>小狼崽</td>
            <td>小狼崽</td>
            <td>小狼崽</td>
        </tr>
    </table>

</body>

</html>

结果如图：
结果展示

Camina hacia ti
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html之表格应用
05-18
html之表格应用教案，适合中职学校老师使用，大学html课程老师也可以使用
详解HTML表格|l-639642.pdf
11-20
HTML表格是网页设计中用于展示数据的重要元素，它允许我们以结构化的方式排列和组织信息。下面将详细解析HTML表格的各个组成部分、属性以及最佳实践。 1. **基本表格结构**： HTML表格由`<table>`标签开始，用于...
HTML之表格标签
hmh520i的博客
12-19 2698
前端学习日记
HTML系列之表格标签
老__L的博客
10-25 5895
本文主要介绍caption、col、colgroup、table、tbody、td、tfoot、th、thead、tr标签。 table 开始标签和结束标签不能省略；表格中由行中的单元格组成；表格中没有列元素，列的个数取决于行的单元格个数；caption 开始标签和结束标签都不能省略；当 table 标签是 caption 的父元素，caption 是 figure 元素的唯一后代的时候，使用 figcaption 元素替代 caption；
HTML之表格隔行变色
worn_xiao的博客
09-16 2885
New Document thead tr{ background:#aaf; } .odd{ background:#ccf; } 编号 姓名
HTML之表格标签及属性
hxwm_8937的博客
07-21 2万+
表格的标签属性及其应用实例
html table tr 属性,HTML之表格标签及属性
weixin_34652580的博客
06-04 2259
一、表格的基本结构........................二、表格的标签及属性简介table：定义表格tr：定义表格对的行th：定义表格中的表头内容td：定义表格的列表格属性：border：表格边框cellspacing：单元格间的间距cellpadding：单元格的内容与其边框的内边距align：表格的对齐方式，通常是left，center，rightbgcolor：表格的背景颜色 ba...
html表格之个人简历
qianqianyunyan的博客
07-18 1万+
html表格属性制作个人简历（简易版）
HTML——表格
三三木木七的博客
05-19 1万+
🌳🌳🌳前言：本文总结了HTML表格的基础知识点 目录 🍄表格——创建 🍄表格——border 🍥表格——border 🍄表格——设置表格的宽、高 🌰举个例子——设置表格的宽、高 🍥表格——width 🍥表格——height 🍄表格——cellpadding 🌰举个例子——cellpadding 🍥表格——cellpadding 🍄表格——cellspacing 🌰举个例子——cellpadding 🍥表格——cellspacing 🍄表格——表格的标题 🌰举个例子...
HTML—表格
Ywyyy231128的博客
11-14 4703
此外，thead、tbody和tfoot标签除了可以使代码更具有语义，还有另外一个重要作用 ：方便分块来控制表格的CSS样式。在HTML中，单元格其实有两种：一种是“表头单元格”，使用的是th标签；另一种是“表行单元格”，使用的是td标签。***一个表格只能有一个标题，也就是只能有一个caption标签。***分析：在默认情况下，表格是没有边框的。***说明：th和td在本质上都是单元格，但是并不代表两者可以互换，它们具有以下区别。***说明：在表格中，有多少组“",就表示有多少行。
html之表格数据增加删除修改
Quincy.Coder的博客
10-11 2万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="./bootstrap-
HTML表格制作
热门推荐
哇塞
06-11 4万+
HTML中制作表格有两种方法： （1）先把最原始的表格画出来，每一个都是单个单元格，然后再根据要求进行行合并或列合并，有的表格需要行列都合并，则也是把它分为两步做，先合并行再合并列（或者先合并列再合并行），若进行了colspan和rowspan的合并，则将之后同一行或同一列的单元格删除，但这种方法较麻烦，容易搞混。 （2）直接根据最终要生成的表格来操作，将每个合并的单元格看做一个小的单元格，不...
HTML制作表格.ppt
11-15
本章节将介绍HTML制作表格的相关知识点，以便读者能够快速掌握HTML表格的制作方法和美化技巧。 一、为什么使用表格？ 表格是HTML文档中的一种常见结构，广泛应用于网页上的文本和图像存放。它可以将数据以表格形式...
HTML5制作表格样式
01-19
废话不多说了，具体代码如下所示： <...表格</title> <style type=text/css> *{ margin: 0; padding: 0; } body{ font: italic 20px Georgia, serif; letter-spacing: normal;
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
基于Springboot和Vue的生鲜超市管理的设计与实现源码 生鲜超市管理的设计与实现代码（优秀毕业设计）
07-24
生鲜超市管理的设计与实现源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
HTML实现冻结表格效果
这些元素是构建HTML表格的基本组件，用于展示数据和表头。 ```html 标题1 标题2 ... 数据1 数据2 ... ... ``` 接着，引入了jQuery库，这是一个广泛使用的JavaScript库，简化了DOM操作和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值