HTML基础————table标签

news2024/11/20 1:49:51

1.什么是table?

table是html中的表格,由tr、td、th元素组成。

tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元

2.可选的属性

属性描述
border定义表格的边框
cellpadding单元格内内容与单元格边的间距
cellspacing单元格与表格边框的间隔
sumaary规定表格的摘要
width规定表格的宽度

3.合并单元格

用到表格,那么无可避免的就会用到合并的单元格,例如要在表格的结尾要写总计,这时候就需要合并单元格。

合并单元格分为合并列、合并行。

rowspan 是合并列

colspan 是合并行

那么怎么实现呢

<table border="1px" cellpadding="10px">
	<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
	<tr><td>1</td><td>憨憨</td><td>21</td></tr>
	<tr><td>2</td><td>哈哈</td><td>21</td></tr>
	<tr><td>3</td><td>嘿嘿</td><td>24</td></tr>
	<tr><td>4</td><td>芜湖</td><td>25</td></tr>
	<tr><td>5</td><td>乌拉</td><td>25</td></tr>
	<tr><td>总数</td><td>5</td><td> </td></tr>
</table>

 上面的代码是一个表格运行如下,我们需要把红色部分合并

 

 3.1实现单元格合并列

如果我们要合并列,那么就把要合并的第二个单元格②删掉,然后在第一个单元格①的属性中写上rowspan,并写上值。

代码如下:

    <tr><td>1</td><td>憨憨</td><td rowspan="2">21</td></tr>	
	<tr><td>2</td><td>哈哈</td></tr>	

  

3.1实现单元格合并行

如果 我们要合并列,那么就把要合并的第二个单元格④删掉,然后在第一个单元格③的属性中写上colspan,并写上值。

代码如下:

    <tr><td>总数</td><td colspan="2">5</td></tr>

4.演示代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第三课table标签</title>
	</head>
	<body>
		<table border="1" cellpadding="10" cellspacing="10">
			<caption>姓名图</caption>
			<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
			<tr><td>1</td><td>憨憨</td><td>21</td></tr>	
			<tr><td>2</td><td>哈哈</td><td>22</td></tr>	
		</table>
		<br />
		<table border="1" cellpadding="10">
			<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
			<tr><td>1</td><td>憨憨</td><td rowspan="2">21</td></tr>	
			<tr><td>2</td><td>哈哈</td></tr>	
			<tr><td>3</td><td>嘿嘿</td><td>24</td></tr>
			<tr><td>4</td><td>芜湖</td><td rowspan="2">25</td></tr>
			<tr><td>5</td><td>乌拉</td></tr>
			<tr><td>总数</td><td colspan="2">5</td></tr>
		</table>
	</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409033.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vite配置环境变量

Vite配置代码环境变量和 Vue2 的配置差不多&#xff0c;都是依靠 .env 文件夹来实现 详情可到 Vite 官网的环境配置里了解&#xff1a;环境变量和模式 {#env-variables-and-modes} | Vite中文网 一、在src同级下创建 .env.production 生产模式和 .env.development 开发模式两…

基于 vue3 element-plus 的暗黑模式

前言 element-plus2.2.0 已经开始支持暗黑模式了 通过在html标签上添加一个名为 dark 的类来启用 基于 vue3 & element-plus 的项目现在可以方便的添加暗黑模式 一、基本使用 因为是通过在html标签上添加 dark 类&#xff0c;可以自行实现切换 但为了方便切换以及进一…

WEB核心【会话技术】第十五章

目录 &#x1f482; 个人主页: 爱吃豆的土豆&#x1f91f; 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 &#x1f3c6;人必有所执&#xff0c;方能有所成&#xff01; &…

【JavaScript】VUE前端实现微信版录制音频wav格式转化成mp3格式和Base64

一、前言 前端有个需求是要实现一个像微信一样&#xff0c;按住录音&#xff0c;松开发送语音&#xff0c;期间踩了不少坑&#xff0c;特地记录一下&#xff0c;主要用到两个库 js-audio-recorder &#xff1a;负责录制音频&#xff0c;支持的格式只有wav、pcmLAMPjs &#x…

三更Blog项目总结(p1~p40)

文章目录项目创建——多模块开发功能业务逻辑总结热门文章列表分类列表分页文章查询文章详情友链查询登录功能退出登录视频地址&#xff1a;SpringBoot项目实战-前后端分离博客项目-Java项目_哔哩哔哩_bilibili 项目创建——多模块开发 整个系统分为前台模块&#xff08;blog&…

三步解决微信小程序cdn加速(资源大小超过200k)

刚开始开发小程序的时候&#xff0c;上传代码会遇到这样的问题&#xff1a;图片和音频资源大小超过 200 K 下面是官方建议 【建议】小程序代码包里可以存放一些必要的静态资源&#xff08;例如tabbar的icon等&#xff09;&#xff0c;不过静态资源体积过大也会影响小程序代码…

运行安装vue3+vite+Ts项目报错,无法加载vite.config.ts文件(failed to load config from D:\XXX\vite.config.ts)

git 上面拉别人的vue3viteTs项目&#xff0c; 安装依赖成功之后运行&#xff0c;出现报错 failed to load config from D:\XXX\vite.config.ts 百度搜索的结果是用 pnpm进行下载 然后卸载node_modules文件进行重新下载&#xff0c;这时候有出现问题 自己的node版本太低。如…

【Node.js+koa--后端管理系统】设计动态发布、修改、查询、删除接口

&#x1f373;作者&#xff1a;贤蛋大眼萌&#xff0c;一名很普通但不想普通的程序媛\color{#FF0000}{贤蛋 大眼萌 &#xff0c;一名很普通但不想普通的程序媛}贤蛋大眼萌&#xff0c;一名很普通但不想普通的程序媛&#x1f933; &#x1f64a;语录&#xff1a;多一些不为什么的…

级联选择器(el-cascader)动态加载(lazyLoad)实现省市区三级选择

开开心心工作&#xff0c;兢兢业业生活 一、实现省市区级联选择&#xff08;插件&#xff09; 1. 需求&#xff1a;实现一个省市区的级联选择器&#xff0c;点击一级&#xff0c;动态加载下一级 那好&#xff0c;我们找个轮子 2. 他山之石&#xff08;找个轮子&#xff09; E…

Eclipse配置Tomcat详细教程,其中包含如何使用eclipse+tomcat创建并运行web项目

一&#xff1a;Tomcat的下载官网:Apache Tomcat - Welcome!https://tomcat.apache.org/ 进入官网显示如图所示的界面&#xff0c;在下下载的是Tomcat9.0版本&#xff0c;你可以自己选一款。 点击然后进入下面这个界面&#xff1a; 在下电脑是64位&#xff0c;所以 在下下载的6…

【vue】仿PC端微信制作聊天框

前言 采用(vuevue-routervuexes6stylus) 来实现一个仿PC端微信的小demo&#xff0c;可以使用一个智能api&#xff0c;实现智能对话。欢迎大家对鄙人提出宝贵意见&#xff0c;相互学习讨论&#xff0c;一起进步。 demo地址 源码地址 demo做的是PC版&#xff0c;建议使用电脑预…

我的VUE 学习之路(下)

前言&#xff1a; 在经历过前面在HTML下的VUE相关基础的洗礼后&#xff0c;我们可以动手去做一些事了&#xff0c;此时发现直接通过直接VUE组件方式与之前在HTML不同&#xff0c;首先要“静一静”&#xff0c;细看之下只是对之前的很多写法做了封装。 本文旨在直接上手Vue项目下…

FormData详解

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式&#xff0c;并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去&#xff0c;本接口和此方法都相当简单直接。如果表单 enctype 属性设为 multipart/form-data &#xff0c;则会使用表单的 submit(…

vue项目控制台报错信息问题记录:Uncaught TypeError: Cannot read properties of null (reading ‘setAttribute‘)

在写vue项目的时候&#xff0c;控制台总是报错如下代码&#xff1a; 1、Uncaught TypeError: Cannot read properties of null (reading ‘setAttribute‘) 主要是因为某些代码书写不规范&#xff0c;导致templete解析不出来&#xff0c;从而报错 解决方案&#xff1a; 检查下…

uniapp 实现生成海报并分享给微信好友和保存到本地相册

记录uniapp 生成二维码海报并保存到本地或者分享给微信好友 – 文章目录记录uniapp 生成二维码海报并保存到本地或者分享给微信好友前言一、引入生成二维码的组件二、点击右侧的分享图标生成海报三&#xff1a;将canvas 图片转化成图片&#xff08;最关键&#xff09;四&#…

el-tree设置利用setCheckedNodes/setCheckedKeys默认勾选节点,以及通过setChecked新增勾选指定节点

实现目标&#xff1a;在生成el-tree时&#xff0c;默认勾选其中某几个选项&#xff1b;或在进行某个选项的选中时&#xff0c;同时勾选上另一个选项。 实现效果&#xff1a; 在生成树结构时&#xff0c;默认勾选其中的两个选项。 在勾选其中一个选项时&#xff0c;另一个选项…

微前端之 qiankun 入门、上手、实战(构建大型 web 应用)

目录 前言 正文 一、介绍 微前端 qiankun 二、快速上手 ​☛主应用 ① 安装 qiankun ② 在主应用中注册微应用 ​☛微应用 ① 导出相应的生命周期钩子 ② 配置微应用的打包工具 三、项目实战 ​☛主应用 ① 安装 qiankun ② 注册微应用并启动 ③ 主应用添加…

ES6--》对象扩展方法

目录 对象扩展 name 属性 属性的遍历 super关键字 Object.is() Object.assign() Object.getOwnPropertyDescriptors() Object.setPrototypeOf() Object.getPrototypeOf() Object.keys()、Object.values、Object.entries()、Object.fromEntries() Object.hasOwn() 对…

如何在 2022 年为 Web 应用程序选择技术堆栈

文章目录什么是技术堆栈&#xff1f;为 Web 开发选择技术堆栈时要考虑的事项选择熟悉的技术跟随趋势考虑项目的细节确保高安全级别记住你的最后期限选择前端技术栈框架编程语言选择后端技术栈编程语言数据库技术堆栈是您应用程序的核心选择最佳的 Web 应用程序堆栈并非易事&…

vue3+ts遇到的小问题

插件volar安装了没有提示。 解决&#xff1a;1. 检查是或否是最新的版本&#xff0c;是的话进入拓展设置&#xff0c;所有的选项都勾选 2. 还是不行就要更新vscoe了。一般的话会在力捕抓到一个错误。跟新就好了 TypeScript intellisense is disabled on template. To enab…