Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >前端基础-HTML表格

前端基础-HTML表格

作者头像
cwl_java
发布于 2020-04-07 07:33:35
发布于 2020-04-07 07:33:35
1.7K00
代码可运行
举报
文章被收录于专栏:cwl_Javacwl_Java
运行总次数:0
代码可运行

表格

导入:我们在博学谷上面可以看到各自班级的课程表

表格图示1

表格图示2

表格图示3

这样的页面就会用到表格。表格在网站中应用常用场景通常是金融类的网站,数据做统计,后台管理系统等

1.相关标签

画图说明,table是一个表格的模块,里面有行,光有行不行,里面要有列,在html中不叫列,叫单元格,再有很多行,就组成了表格-------》table标签包含行tr—》再包含单元格td

表格:<table></table>

行:<tr></tr>

单元格:<td></td>

每列的标题:<th></th>

表格标题:<caption></caption>

小案例:

小案例图示

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!-- 表格的区域,border属性代表边框的意思 -->
<table border="1">
	<!---->
	<tr>
    	<!-- 单元格 -->
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
    	<!-- 单元格 -->
        <td>令狐冲</td>
        <td></td>
        <td>22</td>
    </tr>
    <tr>
    	<!-- 单元格 -->
        <td>任盈盈</td>
        <td></td>
        <td>18</td>
    </tr>
    <tr>
    	<!-- 单元格 -->
        <td>任我行</td>
        <td></td>
        <td>55</td>
    </tr>
    <tr>
    	<!-- 单元格 -->
        <td>岳不群</td>
        <td></td>
        <td>50</td>
    </tr>
</table>

表格的边框 语法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<table border=1>
  
</table>

注意:border这个属性一定加在table标签上,加在td上不生效

2.对齐方式

a) 水平对齐

语法:align="center/left/right"

示意图

b) 垂直对齐

语法:valign="top/middle/bottom"

示意图

3.单元格间距和填充

单元格间距(cellspacing):单元格和单元格距离,默认是2像素

单元格填充(cellpadding):单元格和内容的距离,默认是1像素

示意图

4.合并单元格

图示

导入:最后两行的最后两个单元格为照片,需要合并起来,这种合并是上下合并,所以合并的是行。如果是左右合并,那就是合并的列

合并行(rowspan):把不同的行合并起来,写在上面的单元格上面

合并列(colspan):把不同列合并起来,写在左边的单元格上面

取值是数值,需要合并几个单元格就写数字几就行,一旦合并了单元格,就需要将多余的单元格删掉

代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<table cellspacing="0" cellpading="30" border="1" width="300" height="200">
	<caption><h3>学生证</h3></caption>
    <tr>
    	<th align="center" colspan="4">深圳传值黑马程序员</th>
    </tr>
    <tr align="center">
    	<td>姓名</td>
    	<td>班级</td>
    	<td>学号</td>
    	<td rowspan="2">照片</td>
    </tr>
    <tr align="center">
    	<td>曾真光</td>
        <td>php14期</td>
        <td>007</td>
    </tr>
</table>

注意:合并以后一定要把多余的单元格td删掉

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
html表格菜鸟教程_exls表格
<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或 <td> 元素组成表格结构;其中: <tr> 元素定义表格行,<th> 元素定义表头,<td> 元素定义表格单元。 为了让表格更美观,我们会用到:border,colspan,rowspan,align,bgcolor 等来美化表格,具体在本文都有讲解;
全栈程序员站长
2022/09/22
8.4K0
html表格菜鸟教程_exls表格
前端基础-HTML基础(三)
table标签caption标签th/tr/td标签表格的删除与合并表格行列的删除表格行列的合并参考
efonfighting
2019/12/17
9160
前端基础-HTML基础(三)
IT课程 HTML基础 012_列表和表格
HTML列表是在网页中组织和呈现信息的重要元素,通过使用不同类型的列表,可以更好地结构化和展示内容。
zhaoJian.Net
2024/04/03
1460
IT课程 HTML基础 012_列表和表格
HTML中的表单_表格和表单的作用各是什么
table 表示表格 border=”1″ width=”300″ bgcolor=”aqua” cellspacing=”0″(单元格之间的间距) tr 表行 bgcolor=”chartreuse” height=”50″ th 表头(单元格) 加粗 居中 width=”80″ td 单元格 colspan=”4″ 在同一行跨多列合并 从哪列开始,添加colspan,给定合并的列数rowspan=”3″ 跨多行合并 从哪个开始添加rowspan 给定合并的数量
全栈程序员站长
2022/09/22
3.2K0
HTML中的表单_表格和表单的作用各是什么
前端开发学习──初识Html
type:disc默认 实心小圆圈;square 小方块;circle 空心小圆圈
用户3106371
2018/09/12
1.9K0
前端开发学习──初识Html
【HTML】HTML 表格总结 ★★★ ( 表格标签 | 行标签 | 单元格标签 | 表格标签属性 | 表头单元格标签 | 表格标题标签 | 合并单元格 )
表头单元格 可以在表格中 用作第一排 作为表格 的 表头 使用 , 表头单元格 中的 文本设置 可以与 普通单元格 中的文本设置 不同 ;
韩曙亮
2023/03/30
3.3K0
【HTML】HTML 表格总结 ★★★ ( 表格标签 | 行标签 | 单元格标签 | 表格标签属性 | 表头单元格标签 | 表格标题标签 | 合并单元格 )
【Web前端】“从零开始的HTML 表格”
HTML 表格是一种用于在网页上组织和显示信息的结构性元素,它能够将数据以行和列的形式呈现,帮助用户更清晰地理解数据关系。表格在展示统计数据、产品列表、日程安排等方面非常实用。
一条晒干的咸鱼
2024/11/19
1700
【Web前端】“从零开始的HTML 表格”
标签之美五——网页表格的设计 原
1、<table></table>:表格的开始和结束标签,行列的布局都在<table>标签内。
珲少
2018/08/15
1.2K0
标签之美五——网页表格的设计
                                                                            原
表格及布局——0606上午
今天上午学习了表格的应用以及如何用表格进行页面布局。以下面代码为例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">   <head>     <meta http-equiv="Content-Type" content="t
二十三年蝉
2018/02/27
1.9K0
前端成神之路-HTML(table)
存在即是合理的。 表格的现在还是较为常用的一种标签,但不是用来布局,常见显示、展示表格式数据。
海仔
2020/10/27
1.4K0
前端成神之路-HTML(table)
从零开始学 Web 之 HTML(三)表单
table>tr3>td5 + tab键  <!-- 建立3行5列的表格 -->
Daotin
2018/08/31
3K0
从零开始学 Web 之 HTML(三)表单
HTML表格代码_html如何制作表格代码
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/169633.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/22
15.5K0
【前端就业课 第一阶段】HTML5 零基础到实战(六)表格详解
注意:手机(APP)打开,内容显示更佳,不会的私聊博主即可 想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)的拉到最下面(PC端Web打开)加博主即可,目录也在最下面。
1_bit
2022/04/13
8940
【前端就业课 第一阶段】HTML5 零基础到实战(六)表格详解
Day2:html和css
表格用table,tr代表表格中的一行,必须在table标签中,td用于表示表格中的单元格,<tr></tr>表格中的一行.
达达前端
2019/07/03
1.5K0
HTML5_表格
<html> <head> <meta charset = "utf-8"> <title>表格测试</title> </head> <body> <h3>这是一个表格</h3> <table border = "1px" cellspacing = "0px"> <!--col (column列的缩写)这是一个单标签,决定每一列 <col width = "300px"
bye
2020/11/24
2.5K0
网页内容---HTML后续
1.表格 <!-- table:声明一个表格 tr:声明表格的行 th、td:声明表格的单元格 th:表头 td:普通的单元格 caption:表格的标题 table: border:表格的边框大小 cellspacing:单元格和边框的间距 cellpadding:单元格边框与内容的距离
用户10216580
2022/12/06
4.3K0
HTML标签学习
h1到h6:会将其中的数据加粗显示,并且显示依次减弱,标题标签自带换行功能(块级标签)
全栈程序员站长
2021/04/21
1.1K0
HTML标签学习
Java Web
橘子又加强了么
2023/08/19
1960
html table表格 - 美女信息
仅供学习,转载请注明出处 table 表格 1、<table>标签:声明一个表格,它的常用属性如下: border属性 定义表格的边框,设置值是数值 cellpadding属性 定义单元格内
Devops海洋的渔夫
2019/05/31
1.2K0
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
HTML 表格由 <table> 标签以及一个或多个 <tr> 、 <th> 或 <td> 标签组成。
陶然同学
2023/02/27
1.9K0
【网页前端】HTML表格、图片、列表、超链接以及综合案例练习
相关推荐
html表格菜鸟教程_exls表格
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验