使用HTML添加表格1（基本元素）—零基础自学网页制作

最新推荐文章于 2024-08-21 10:15:37 发布

猿说前端

最新推荐文章于 2024-08-21 10:15:37 发布

阅读量717

点赞数

文章标签： html 前端 web前端前端入门前端教程

本文链接：https://blog.csdn.net/ITZ1992/article/details/106242479

版权

本文介绍了HTML中的表格元素，包括`<table>`、`<caption>`、`<colgroup>`、`<th>`和`<tr>`等标签，通过示例代码展示了如何构建基础表格，并教授如何添加外边框以及调整表格尺寸。强调了HTML基础知识对于前端学习的重要性，鼓励读者动手实践。

摘要由CSDN通过智能技术生成

表格元素详解与练习

提到表格，大家最先想到的就是EXCEL这款软件，实际上在对表格的操作上，HTML与EXCEL非常相似。

在展示数据，统计数据方面，表格比文字描述更具表达优势，在网页中，表格也经常被用来展示数据、计划日常安排等内容。如图所示：

今天我们就来学习一下如何向页面中添加表格元素。

首先来介绍一下表格元素中的基本标签。

NO.1：<table></table>

这个标签是书写表格的第一个标签，它本身在页面上看不出什么内容，但是它的属性可以控制表格显示的全局样式。这个标签的开始标签写在表格元素的开头，结尾标签写在表格元素的结尾。

NO.2：<caption></caption>

这个标签是表格的标题标签。

NO.3：<tr></tr>

这个标签定义表格的列标签。

NO.4：<th></th>

这个标签是列表标题标签，例如，男生、女士、姓名等。

NO.5：

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

猿说前端

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

html/javascript-表格的创建和使用

记录和分享程序人生的点点滴滴

07-28

4396

html经常使用到表格table。在HTML中创建和使用表格，可以直接在html定义标签，也可以使用DOM（文档对象模型）来动态创建和操作表格元素。

使用HTML添加表格4（行颜色与表格嵌套）—零基础自学网页制作

web前端入门基础进阶教程-htmlcssjs

05-22

2947

行颜色设置的简便方法昨天我们在《使用HTML添加表格3（间距与颜色）—零基础自学网页制作》（目录在结尾）中学习了设置单元格以及其中内容的空间间距和背景颜色。其中添加列向单元格背景颜色只需要修改对应的标签中的style属性，而修改行向标签需要修改不同标签中的<td>标签的style属性，这样操作起来就非常的麻烦，那有没有简便的修改行向单元格背景颜色的方法呢？当然有！开发团队给出了<colgroup><col></col></colgroup&gt

参与评论您还未登录，请先登录后发表或查看评论

table.html（html表格练习）

07-21

html5简单的项目支出表格作业，表内容为项目负责人联系电话项目支出细化预算(单位：万元)项目类别发展性专项建设性专项基本建设和大修理项目合计项目前期费用征地费建筑工程费安装工程费设备等购置费原材料其他费用各种建筑物面积起始年终止年项目属性新增项目上年延续项目项目预算来源项目当年预算项目总预算合计 1、财政拨款（补助）会议培训项目

html——网页上添加表格

lengyuefengqing的博客

06-17

5412

有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：想在网页上展示上述表格效果可以使用以下代码：创建表格的四个元素： table、tbody、tr、th、td 1、…：整个表格以标记开始、标记结束。 2、…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。 3、…

【HTML】为网页添加表格

最新发布

weixin_51649465的博客

08-21

421

一个表格只能定义一对< thead>< /thead>、一对< tfoot></ tfoot >和多对< tbody></ tbody >，它们必须按< thead>< /thead>、< tfoot>< /tfoot >和< tbody>< /tbody >的顺序使用。对同一行中的单元格定义不同的高度，或对同一列中的单元格定义不同的宽度时，最终的宽度或高度将取其中的较大者。：定义表格的头部,包含网页的logo和导航等头部信息。：定义表格的主体，包含网页中除头部和底部之外的内容。

CSS控制表格样式

m0_58813405的博客

12-12

1187

css

WEB课堂作业练习 1 （div布局，表格，锚点，列表）

人生当苦无妨

05-15

413

WEB课堂作业练习 1 （div布局，表格，锚点，列表） div布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head

使用HTML添加表格2（表格头部与脚部）—零基础自学网页制作

web前端入门基础进阶教程-htmlcssjs

05-22

1486

添加表格头部信息与脚部信息昨天我们在《使用HTML添加表格1（基本元素）—零基础自学网页制作》（文章结尾有目录）中学习了如何向网页中添加基础表格，今天我们来学习如何为基础表格添加表头和表脚信息。先看看效果吧。老规矩，先介绍表头和表脚的标签。表头：<thead></thead> 这个标签只是告诉页面这里是表头，如果添加文字的话还需要<tr></tr>列标签和<td></td>行标签。如果要添加表头的话，直接在代码中添加这个标签

使用HTML添加表格3（间距与颜色）—零基础自学网页制作

web前端入门基础进阶教程-htmlcssjs

05-22

1035

表格空间设置通过为<table></table>标签的cellspacing进行赋值可以调整单元格与单元格之间的空间距离。示例代码如下： <table border = "1" width = "100%" cellspacing = "50"> 页面效果如下：下面我们删除cellspacing = "50"这段代码看看变化，如图：通过对比，大家应该明白cellspacing这个属性的作用了吧。通过为<table></table>

HTML表单元素初识2——零基础自学网页制作

web前端入门基础进阶教程-htmlcssjs

05-24

521

表单元素属性2 为了不再被疑似涉嫌低俗，我只能给大家提供这种图片了，耐得住寂寞才能学有所成！吸引人的东西未必珍贵。昨天我们学习了《HTML表单元素初识1——零基础自学网页制作》（目录在结尾），大家通过学习对HTML页面中的表单元素的基本写法已经非常熟悉了。同时也学会了通过变换标签中的type属性的值为表单赋予不同的功能，例如输入文本和建立多选表单。期间，对name与value这两个属性的作用与特点进行了阐释。今天我们继续学习新的表单内容。 **建立单选表单：**单选表单把<input/>标签

DW CS6中文版零基础自学视频教程第04章使用HTML创建基本文本网页 18节.zip

04-13

在本套“DW CS6中文版零基础自学视频教程第04章使用HTML创建基本文本网页 18节”中，我们将深入学习如何利用Dreamweaver CS6这个强大的网页设计工具来创建基本的HTML文本网页。Dreamweaver是Adobe公司推出的一款...

【html】表单元素练习

萌宅鹿的技术小屋

01-18

417

源于 how2j教程实现如下效果： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"> </head> <body> <table width="100%" > <tr&g...

HTML基础知识-表单、表格简单练习

弱小无助但胖胖

07-25

588

表单练习 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action=""> <div> <label ...

在html中加表格的方法,HTML 表格

weixin_32258195的博客

05-30

1396

HTML 表格HTML 表格实例First NameLast NamePointsJillSmith50EveJackson94JohnDoe80AdamJohnson67在线实例表格这个例子演示如何在 HTML 文档中创建表格。(可以在本页底端找到更多实例。)HTML 表格表格由标签来定义。每个表格均有若干行(由标签定义)，每行被分割为若干单元格(由标签定义)。字母 td 指表格数据(table...

html中加个表格,【HTML 教程】表格标签

weixin_34509196的博客

06-02

302

作者 | 阮一峰表格(table)以行(row)和列(column)的形式展示数据。1、，是一个块级容器标签，所有表格内容都要放在这个标签里面。 ... ...总是里面的第一个子元素，表示表格的标题。该元素是可选的。示例表格2、、、、、都是块级容器元素，且都是的一级子元素，分别表示表头、表体和表尾。 ... ... ... ... ... ...这三个元素都是可选的。如果使用了，那么和...

怎么在HTML中插入表单

weixin_72702318的博客

03-12

2634

value是值，会被上传，但是用户填写的字符也是值，有的时候用户会更改这个值，你写上也是多此一举对吧，但是当用户选择了记住账号密码了，这个value就要有了。的，假如我们提交了一个数据，但是没有给它命名，服务器怎么能知道这是什么东西呢对吧，相对的，如果没有value，用户提交了，服务器也不会知道你提交的是什么，有些心细的同学已经发现了，我们做的是一个注册的页面，肯定是要上传文件的，那应该怎么上传呢，有的时候发现自己输错了好多东西，要重置页面怎么办呢。好啦，今天就到这里，同学们记得开心，记得按时复习。

HTML中的元素使用方法1—零基础自学网页制作

web前端入门基础进阶教程-htmlcssjs

05-20

421

HTML元素这一节以及以后几节我们将对HTML中标签中的各种元素进行一个概述，并对一些基本元素进行练习。 HTML元素：指的是从开始标签到结束标签的所有代码。举个例子，在《第一个HTML页面如何写？——零基础自学网页制作》这一节中，我们写了这样一个页面"第一个页面.html"。后面的练习我们都在这个文件中进行。 <!DOCTYPE HTML> <html> <head> </head> <body> <h&

初识HTML中的div块元素—零基础自学网页制作

web前端入门基础进阶教程-htmlcssjs

05-24

706

<div>块元素基础属性讲解 <div>元素是个有故事的元素，这个元素很早就出现在html超文本标记语言中，它设计之初就是为了解决网页页面布局的需求。但是遗憾的是它出生后一直怀才不遇。在我还上初中的时候，智能手机还没有出现，更没有平板电脑等移动设备。上网是通过摆在桌子上的计算机来完成的。那时，大街小巷上有好多网吧。那时，马云刚刚辞去工作准备创业。那时，发送邮件的操作都会出现在计算机课程中。那时，对页面还没有现在的跨平台要求。那时，flashplayer大行其道。那时，

day35作业（20191221 ）- web元素操作练习

邢可可的博客

12-28

280

1）同步上课的元素操作场景代码。实现腾讯课堂 - QQ用户名密码登陆的自动化脚本。注意：有iframe. 另，如果公司项目有iframe，可用公司项目的。 """ ====================== @Author:coco @Time:2019/12/27 @File:腾讯课堂登录.py @software:PyCharm =================...

html table添加元素,关于HTML元素的Table控件javascript添加删除表中行列的方法

weixin_39610594的博客

07-02

186

如何生成3行3列的表格?例子一:var id = 0;function addTable(row){for(var i = 0;i<=row;i++)tr = TableForm.insertRow();td = tr.insertCell();td.id = "td1"+i;td = tr.insertCell();td.id = "td2"+i;td = tr.insertCell();...