html表格知识总结

程序猿 • 2025年12月21日 16:40:19 • 好文分享 • 阅读 0

要踏入程序员的大门，我们必会经过的路就是html，掌握基础的html才能更好的学习接下来的技术，那么今天我们就来全方面的分享一下html表格相关的知识。

1、

标记

　　a，基本格式

表格内容

　　b，table 标记的属性

　　　　width属性：表示表格的宽度，他的值可以是像素（px）也可以是父级元素的百分之百（％）

立即学习“前端免费学习笔记（深入）”；

　　　　height属性：表示表格的高度，他的值可以是像素（px）也可以是父级元素的百分比（％）

　　　　border属性：表示表格外边框的宽度

　　　　align属性：表格的显示位置，值left居左显示 center居中显示 right居右显示默认left

　　　　cellspacing属性：单元格时间的间距，默认2px ，单位像素

　　　　cellpadding属性：单元格内容与单元格边框的显示距离，单位像素

　　　　frame属性：控制表格边框的显示距离

　　　　　　void(默认值) 表示无边框

　　　　　　above 表示仅顶部有边框

　　　　　　below 表示仅有底部边框

　　　　　　hsides 表示仅有顶部边框和底部有边框

　　　　　　lhs 表示仅有左侧边框

　　　　　　rhs表示仅有右侧边框

　　　　　　vsides表示仅有左右侧边框

　　　　　　box 包含全部4个边框

　　　　　　border包含全部4个边框

　　　rules属性：控制是否显示以及如何显示单元格之间的分割线

　　　　　　none（默认值）表示无分割线

　　　　　　all 表示包括所有分隔线

　　　　　　rows表示仅有行分割线

　　　　　　clos表示仅有列分割线

　　　　　　groups表示仅在行组合列组之间有分割线

　　c，制作一个简单的网页布局

2，

标记

　　a，什么时候使用？在什么时候使用如果表格需要使用标题，那么就可以使用

标记

　　b，如何使用？

属性的插入位置，直接位于属性之后就，表格行之前　

　　c，align属性　

　　　　top：标题放在表格的上部

　　　　botton：标题放在表格的下部

　　　　left：标题放在表格的左边

　　　　right：标题放在表格的右边

3，

标记

　　a，定义表格的一行，对于每一个表格行，都是由一对

…标记表示，每一行标记哪可以嵌套多个或者

标记

　　b，可选属性

　　　　设置水平对齐方式格式：align＝“颜色值”

　　　　botton：靠顶端对齐

　　　　top：靠底部对齐

　　　　middle：居中对齐

4，

和

　　a，

和

都是单元格的标记，其必须嵌套在

标签内，是成对出现

　　b，

是表头标记，通常位于首行或者首列，中的文字默认会被加粗，而

不会

　　c，

是数据标记，表示该单元格的具体数据

　　d，两者的标记属性都是一样的

　　e，属性

　　　　bgcolor：设置单元格背景

　　　　align：设置单元格背景

　　　　valign：设置单元格垂直对齐方式

　　　　width：设置单元格宽度

　　　　height：设置单元格高度

　　　　rowspan：设置单元格所占行数

　　　　clospan：设置单元格所占列数

eg：

        表格            表格的标题            班级         姓名         年级         成绩     
            四年级一班         张三         16         80     
                四年级一班         李四         16         70     
                四年级一班         王五         16         60

表格的标题
班级	姓名	年级	成绩
四年级一班	张三	16	80
四年级一班	李四	16	70
四年级一班	王五	16	60

以上就是最基础的html表格的一些相关内容，根据上面的教程来完成一个表格，我相信你会有很大的收获。

关于作者

程序猿签约作者

381.6K 文章

0 评论

1 粉丝

这个人很懒，什么都没有留下～

js实现html转成pdf

上一篇 2025年12月21日 16:40:12

pip list 与 pip freeze 的区别

下一篇 2025年12月14日 22:52:10

js实现html转成pdf

在项目开发的时候，我们偶尔或者是经常会遇到一些难题，关于用js吧html页面转换成pdf也是一个难题，意思是说相当于把整个页面截下来，然后保存成pdf。其实，能够实现html转pdf的方法还是挺多的，大概有以下几种： 1、大部分浏览器就有这个功能。然而我们客户要的可不是这个，人家要的是能够在系统中…

程序猿
好文分享 2025年12月21日
0000
添加或删除 HTML dom元素

文档对象模型(document object model，简称dom)，是w3c组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为dom，本章内容我们就分享给大家关于添加或删除 html dom元素的教程，赶紧来学…

程序猿
好文分享 2025年12月21日
0000
好文分享

Emmet 的 HTML 语法详解

本文主要介绍 emmet 的 html 语法，看完之后，你就会看懂并且会写出那句代码了。现在，打开你的 st2 然后新建一个 html 文档，跟着文章，即时输入对应的指令然后亲自尝试一下！生成 html 文档初始结构html 文档的初始结构，就是包括 doctype、html、head、body 以…

程序猿
2025年12月21日
0000
在HTML中插入空格的几种方法

关于html，基本上作为程序员我们都会用到，本篇内容我们主要是针对刚入门的学员们，介绍两种在html中插入空格的方法。方法1、插入单个空格和制表符 1、插入一个非间断空格。一般来说，无论你按多少次空格键，HTML也只会在单词之间显示一个空白间隔。当你需要插入多个空格时，请输入或代码。它们名为…

程序猿
好文分享 2025年12月21日
0000
html中由元素上的鼠标点击触发的事件属性onclick

实例当点击按钮时执行一段 javascript： Copy Text 浏览器支持 IE Firefox Chrome Safari 立即学习“前端免费学习笔记（深入）”； Opera 所有主流浏览器都支持 onclick 属性。定义和用法 onclick 属性由元素上的鼠标点击触发。注释：on…

程序猿
好文分享 2025年12月21日
0000
html中在鼠标双击元素时触发的事件属性ondblclick

实例当双击鼠标按钮时执行一段 javascript： Copy Text 浏览器支持 IE Firefox Chrome Safari 立即学习“前端免费学习笔记（深入）”； Opera 所有主流浏览器都支持 ondblclick 属性。定义和用法 ondblclick 属性在鼠标双击元素时触发…

程序猿
好文分享 2025年12月21日
0000
html在鼠标按钮在元素上按下时触发的事件属性onmousedown

实例当在段落上按下鼠标按钮时执行一段 javascript：请点击此文本！浏览器支持 IE Firefox Chrome Safari 立即学习“前端免费学习笔记（深入）”； Opera 所有主流浏览器都支持 onmousedown 属性。定义和用法 onmousedown 属性在鼠标按钮在…

程序猿
好文分享 2025年12月21日
0000
html在鼠标指针移动到元素上时触发的函数onmousemove

实例当鼠标指针移动到图像上时执行一段 javascript： @@##@@ 浏览器支持 IE Firefox Chrome Safari 立即学习“前端免费学习笔记（深入）”； Opera 所有主流浏览器都支持 onmousemove 属性。定义和用法 onmousemove 属性在鼠标指针移动…

程序猿
好文分享 2025年12月21日
0000
html中在鼠标指针移动到元素外时触发的事件属性onmouseout

实例当鼠标指针移动到图像之外时执行一段 javascript： @@##@@ 浏览器支持 IE Firefox Chrome Safari 立即学习“前端免费学习笔记（深入）”； Opera 所有主流浏览器都支持 onmouseout 属性。定义和用法 onmouseout 属性在鼠标指针移动到…

程序猿
好文分享 2025年12月21日
0000
html中在鼠标指针移动到元素上时触发的事件属性onmouseover

实例当鼠标指针移动到图像上时执行一段 javascript： @@##@@ 浏览器支持 IE Firefox Chrome Safari 立即学习“前端免费学习笔记（深入）”； Opera 所有主流浏览器都支持 onmouseover 属性。定义和用法 onmouseover 属性在鼠标指针移动…

程序猿
好文分享 2025年12月21日
0000
html中在松开鼠标按钮时触发的事件属性onmouseup

实例当在段落上松开鼠标按钮时执行 javascript： Click the text! 浏览器支持 IE Firefox Chrome Safari 立即学习“前端免费学习笔记（深入）”； Opera 所有主流浏览器都支持 onmouseup 属性。定义和用法 onmouseup 属性在松开鼠…

程序猿
好文分享 2025年12月21日
0000
html中会在图像加载被中断时发生的事件onabort

定义和用法 onabort 事件会在图像加载被中断时发生。当用户在图像完成载入之前放弃图像的装载（如单击了 stop 按钮）时，就会调用该句柄。语法 onabort=”SomeJavaScriptCode” 参数描述SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScr…

程序猿
好文分享 2025年12月21日
0000
几种html编辑器的优缺点总结

不论在做前端开发还是后端开发的时候，我们都会用到编辑器，那么随之而来的就是各种各样的编辑器出现，关于html编辑器也有很多，那么哪种html编辑器最好用呢？他们的优点缺点又有那些呢？这篇文章我们主要讲了几种主流html编辑器优缺点比较。 1. FckEditor：优点：开源免费，完整的二次开发…

程序猿
好文分享 2025年12月21日
0000
html规定元素的tab（用于导航时）键控制次序的属性tabindex

实例带有指定 tab 键顺序的链接： W3SchoolGoogleMicrosoft 浏览器支持几乎所有浏览器均 tabindex 属性，除了 Safari。定义和用法 tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）。提示和注释注释：以下元素支持 tabi…

程序猿
好文分享 2025年12月21日
0000
html规定关于元素的额外信息的属性title

实例在 html 文档中使用 title 属性： PRC was founded in 1949.W3School.com.cn 定义和用法 title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。提示：title 属性常与 f…

程序猿
好文分享 2025年12月21日
0000
html规定是否应该翻译元素内容的translate元素

实例规定不应翻译某些元素：请勿翻译本段。本段可被译为任意语言。浏览器支持所有主流浏览器都无法正确地支持 translate 属性。定义和用法 translate 规定是否应该翻译元素内容。提示：请使用 class=”notranslate” 替代。立即学习“前端…

程序猿
好文分享 2025年12月21日
0000
好文分享

html设置或返回用于填充绘画的颜色渐变或模式的属性fillStyle

实例定义用蓝色填充的矩形： JavaScript: var c=document.getElementById(“myCanvas”);var ctx=c.getContext(“2d”);ctx.fillStyle=”#0000ff”;ctx.fillRect(20,20,150,100); 浏…

程序猿
2025年12月21日
0000
html在源代码中插入注释标签

实例 html 注释：这是一段普通的段落。浏览器支持 IE Firefox Chrome 立即学习“前端免费学习笔记（深入）”； Safari Opera 所有浏览器都支持注释标签。定义和用法注释标签用于在源代码中插入注释。注释不会显示在浏览器中。您可使用注释对您的代码进行解释，这样做有助…

程序猿
好文分享 2025年12月21日
0000
html在元素失去焦点时触发的事件属性onblur

实例当用户离开输入字段时对其进行验证：浏览器支持 IE Firefox Chrome Safari 立即学习“前端免费学习笔记（深入）”； Opera 所有主流浏览器都支持 onblur 属性。定义和用法 onblur 属性在元素失去焦点时触发。 onblur 常用于表单验证代码（例如用户离开…

程序猿
好文分享 2025年12月21日
0000
好文分享

html在元素值改变时触发的事件属性onchange

实例当值改变时检查输入字段：浏览器支持 IE Firefox Chrome Safari 立即学习“前端免费学习笔记（深入）”； Opera 所有主流浏览器都支持 onchange 属性。定义和用法 onchange 在元素值改变时触发。 onchange 属性适用于：、以及元素。 HTM…

程序猿
2025年12月21日
0000

发表回复

登录后才能评论

html表格知识总结

关于作者

相关推荐

发表回复