当前位置:首页 > 前端技术 > HTML

HTML

2022年08月05日 01:50:53前端技术4

1. 基本表格

HTML _ JavaClub全栈架构师技术笔记

<!--基本表格-->
                <table border='2' width='600' cellpadding='5' cellspacing='0'>
                    <tr>
                        <td>1.1</td>
                        <td>1.2</td>
                        <td>1.3</td>
                    </tr>

                    <tr>
                        <td>2.1</td>
                        <td>2.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr>
                        <td>3.1</td>
                        <td>3.2</td>
                        <td>3.3</td>
                    </tr>
                </table>

2. 无边框表格

只需去掉1中的border即可

HTML _ JavaClub全栈架构师技术笔记

3. 双线表格

将1中的cellspacing设为非0即可。
HTML _ JavaClub全栈架构师技术笔记

4. 合并多列表格

td属性:
width: 单元格宽度
height: 单元格高度
bgcolor: 背景颜色
background: 背景图片
align: 单元格的水平对齐方式
valign: 单元格的垂直对齐方式(top/middle/bottom/baseline)
rowspan: 行合并数目
colspan: 列合并数目(特定长度的单元格,不会删除后面的单元格)

tr属性:
align right/left/center/justify/char 定义表格行的内容对齐方式。
bgcolor rgb(x,x,x)/#xxxxxx/colorname 规定表格行的背景颜色。
char character 规定根据哪个字符来进行文本对齐。
charoff number 规定第一个对齐字符的偏移量。
valign top/middle/bottom/baseline 规定表格行中内容的垂直对齐方式。


用colspan产生3个长度的单元格,再用align将单元格内的文字居中即可

HTML _ JavaClub全栈架构师技术笔记

<!--列合并-->
                <table border='2' width='600' cellpadding='5' cellspacing='2'>
                    <tr>
                        <td colspan='3' align='middle'>1.1</td>
                    </tr>

                    <tr>
                        <td>2.1</td>
                        <td>2.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr>
                        <td>3.1</td>
                        <td>3.2</td>
                        <td>3.3</td>
                    </tr>
                </table>

5. 合并多行表格

HTML _ JavaClub全栈架构师技术笔记

                <li>行合并表格</li>
                <table border='2' width='600' cellpadding='5' cellspacing='2'>
                    <tr>
                        <td rowspan='3' align='middle' valign='middle'>1.1</td>
                        <td>1.2</td>
                        <td>1.3</td>
                    </tr>

                    <tr>
                        <td>2.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr>
                        <td>3.2</td>
                        <td>3.3</td>
                    </tr>
                </table>

6. 复杂表格1

混合使用行和列的合并

HTML _ JavaClub全栈架构师技术笔记


                <li>复杂表格1</li>
                <table border='2' width='600' cellpadding='5' cellspacing='2'>
                    <tr>
                        <td>1.1</td>
                        <td colspan='2' align='middle'>1.2+1.3</td>
                    </tr>

                    <tr>
                        <td>2.1</td>
                        <td rowspan='2' align='middle'>2.2+3.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr>
                        <td>3.1</td>
                        <td>3.3</td>
                    </tr>
                </table>

7. 复杂表格2

HTML _ JavaClub全栈架构师技术笔记

                <li>复杂表格2</li>
                <table border='2' width='600' cellpadding='5' cellspacing='2'>
                    <tr>
                        <td>1.1</td>
                        <td>1.2</td>
                        <td>1.3</td>
                    </tr>

                    <tr>
                        <td colspan='2' align='middle'>2.1+2.2</td>
                        <td rowspan='2' valign='middle' align='middle'>2.3+3.3</td>
                    </tr>

                    <tr>
                        <td>3.1</td>
                        <td>3.2</td>
                    </tr>
                </table>

8. 凸起效果表格

table属性:
bordercolorlight: 边框亮部分的颜色(边框border大于1才有用)(单元格的右下,整个表格的左上)
bordercolordark:边框暗的部分(单元格的左上,整个表格的右下)

HTML _ JavaClub全栈架构师技术笔记

<!--凸起效果-->
                <table border='2' width='600' cellpadding='5' cellspacing='2' bordercolorlight='black' bordercolordark='white' bgcolor='gray'>
                <tr>
                        <td>1.1</td>
                        <td>1.2</td>
                        <td>1.3</td>
                    </tr>

                    <tr>
                        <td>2.1</td>
                        <td>2.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr>
                        <td>3.1</td>
                        <td>3.2</td>
                        <td>3.3</td>
                    </tr>
                </table>

9. 凹陷效果表格

将8中的颜色逆置
HTML _ JavaClub全栈架构师技术笔记

10. 细线表格

1.表格自身的border=0
2.给表格设置背景颜色(细线的颜色)
3.给表格设置单元格之间的距离(线条的粗细)

HTML _ JavaClub全栈架构师技术笔记

<!--细线表格-->
                <table  width='600' cellpadding='0' cellspacing='1' bgcolor='black'>
                    <tr bgcolor='white'>
                        <td>1.1</td>
                        <td>1.2</td>
                        <td>1.3</td>
                    </tr>

                    <tr bgcolor='white'>
                        <td>2.1</td>
                        <td>2.2</td>
                        <td>2.3</td>
                    </tr>

                    <tr bgcolor='white'>
                        <td>3.1</td>
                        <td>3.2</td>
                        <td>3.3</td>
                    </tr>
                </table>

th标题栏(文字加粗_自动居中)
<center>将center包括的所有内容居中。

作者:twilight0402
来源链接:https://blog.csdn.net/twilight_karl/article/details/53968785

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/18052.html

分享给朋友:

“HTML” 的相关文章

HTML5结构标签

GUIDM在这里祝大家节日快乐! 博主有话说:如果有描述错误之处请大家纠正。让我们可以一起学习一起进步。 个人主页:GUIDM的主页 内容专栏:HTML5干货系列 此块内容为纯纯的干货,略显乏味枯燥,是笔记向的blog。如果觉得还不错,希...

HTML常用标签的用法

HTML常用标签的用法

一、首先要了解一下什么是HTML,HTML(Hyper Text Markup Language,简称:HTML)也叫作超文本标记语言,是一种使用结构化Web网页及其内容的标记语言,HTML文档也叫做Web页面, 下面就来讲讲一些HTML中常用的标签。...

模板引擎 Thymeleaf  动态渲染 HTML

模板引擎 Thymeleaf 动态渲染 HTML

1、添加依赖 <!-- Thymeleaf 模板引擎 --> <dependency> <groupId>org.thymeleaf</gro...

HTML5 速查列表

HTML 速查列表 HTML 速查列表. 你可以打印它,以备日常使用。 HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题<...

script标签的属性

script标签的属性

共六个,language废弃,charset不常用。 async:异步加载脚本,且不保证加载顺序(下载时不影响页面解析,但解析时会暂停页面渲染) defer:立即下载,延迟执行(遇到</html>标签时执行),有顺序 type:默认type='tex...

HTML之框架结构标签的简单使用

框架标签的简单使用 框架: 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面,简而言之,就是在一个窗口中显示多个页面。 每个页面称之为一个框架。并且每个框架独立于其他的框架。 使用...

HTML框架结构标签(frameset)

HTML框架结构标签(frameset)

第一次了解到竟然还有HTML框架结构标签()。为此小编在实例中应用了一下,但是在搭建框架之初就遇到 了问题。为此总结本博客,以便大家能及时解决问题。 什么是HTML框架结构标签(<frameset>)...

HTML中的Style标签media属性控制打印内容样式

最近项目用到Web页面打印报表的功能,因为我们的项目采用的是HTML的Table方式实现的表格,所以符合javascript中的window.print,了解了下window.print()函数的使用方式。 window.print():用来打印window.documen...

HTML表单标签常用属性及其常见子标签

表单标签 通过form来定义 <form> //1.input类型 //2.select类型 //3.textarea类型 </form> 常用属性 ​ action:提交路径,默认是当...

v-html 解析并插入 html 标签

v-html 解析并插入 html 标签

1. 双大括号会将数据解释为普通文本,而非 HTML 代码。 <div id="app"> <p id="a">Using mustaches: { { rawHtml }}</p> <p >Using v-ht...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。