初学HTML用法大全指导(三)html中建立表格

2024-08-29 14:18

本文主要是介绍初学HTML用法大全指导(三)html中建立表格,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

       上一篇博客我们讲了web页面中html脚本语言对图片的设置,这一篇博客我们来聊一聊html页面中经常见到的再普通不过的表格。这篇博客我会首先去聊一聊怎样在web页面用html标签创建表格,其次我会聊一聊对表格的行合并与列合并,然后再聊一聊在建立表格的标签中一些常见属性的使用。

       1:在web页面中创建表格首先要用到<table>标签,去告诉浏览器等解析器这是一个table标签。<tr>标签显示行数;<td>标签显示列数。其中table标签中的属性border是设置整个表格的边框值。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<Center>
<table border="1">
<tr><td>A-one</td><td>A-two</td><td>C-Three</td>
</tr>
<tr><td>B-one</td><td>B-two</td><td>B-Three</td>
</tr>
</table>
</Center>
</body>
</html>


       2:用rowspan属性合并上下单元格;用colspan属性合并左右单元格。但是在合并时注意要把合并的行或者列去除掉。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>合并左右单元格、合并上下单元格</title>
</head>
<body>
<table border="1"><tr><td colspan="2">合并左右单元格</td><td>A-3</td></tr><tr><td rowspan="2">合并上下单元格</td><td>B-2</td><td>B-3</td></tr><tr><td>C-2</td><td>C-3</td></tr>
</table>
</body>
</html>

      3:其他一些常用到的属性:比如align属性设置对其方式;bgcolor属性设置表格的背景颜色和边框的颜色;cellpadding与cellspacing属性设定边距。其中cellpadding属性设置表格单元格里面的内容距离格线的距离;cellspacing属性设定表格相邻单元格边线之间的距离;align属性设置对齐方式;height设置表格高;width设置表格的宽度

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格中常用属性的使用</title>
</head>
<body><table border="1" align="center" height="400" width="400" cellspacing="40px" cellpadding="50px;"><tr><th colspan="2" align="center" bgcolor="gray">A-1</th><th align="right" bgcolor="yellow">A-3</th></tr><tr bgcolor="gray"><td rowspan="2" bgcolor="red">BBB-1111</td><td colspan="2">BBB-2222</td></tr><tr><td colspan="2" align="left">C-2</td></tr></table>
</body>
</html>


   4:上面介绍的是表格中常用的知识,如果想了解更多关于表格中的属性的使用方法自己动手吧。



这篇关于初学HTML用法大全指导(三)html中建立表格的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

java中Optional的核心用法和最佳实践

《java中Optional的核心用法和最佳实践》Java8中Optional用于处理可能为null的值,减少空指针异常,:本文主要介绍java中Optional核心用法和最佳实践的相关资料,文中... 目录前言1. 创建 Optional 对象1.1 常规创建方式2. 访问 Optional 中的值2.1

git stash命令基本用法详解

《gitstash命令基本用法详解》gitstash是Git中一个非常有用的命令,它可以临时保存当前工作区的修改,让你可以切换到其他分支或者处理其他任务,而不需要提交这些还未完成的修改,这篇文章主要... 目录一、基本用法1. 保存当前修改(包括暂存区和工作区的内容)2. 查看保存了哪些 stash3. 恢

Python struct.unpack() 用法及常见错误详解

《Pythonstruct.unpack()用法及常见错误详解》struct.unpack()是Python中用于将二进制数据(字节序列)解析为Python数据类型的函数,通常与struct.pa... 目录一、函数语法二、格式字符串详解三、使用示例示例 1:解析整数和浮点数示例 2:解析字符串示例 3:解

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

C++/类与对象/默认成员函数@构造函数的用法

《C++/类与对象/默认成员函数@构造函数的用法》:本文主要介绍C++/类与对象/默认成员函数@构造函数的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录名词概念默认成员函数构造函数概念函数特征显示构造函数隐式构造函数总结名词概念默认构造函数:不用传参就可以

使用C#删除Excel表格中的重复行数据的代码详解

《使用C#删除Excel表格中的重复行数据的代码详解》重复行是指在Excel表格中完全相同的多行数据,删除这些重复行至关重要,因为它们不仅会干扰数据分析,还可能导致错误的决策和结论,所以本文给大家介绍... 目录简介使用工具C# 删除Excel工作表中的重复行语法工作原理实现代码C# 删除指定Excel单元

使用Python实现网页表格转换为markdown

《使用Python实现网页表格转换为markdown》在日常工作中,我们经常需要从网页上复制表格数据,并将其转换成Markdown格式,本文将使用Python编写一个网页表格转Markdown工具,需... 在日常工作中,我们经常需要从网页上复制表格数据,并将其转换成Markdown格式,以便在文档、邮件或

Python实现pdf电子发票信息提取到excel表格

《Python实现pdf电子发票信息提取到excel表格》这篇文章主要为大家详细介绍了如何使用Python实现pdf电子发票信息提取并保存到excel表格,文中的示例代码讲解详细,感兴趣的小伙伴可以跟... 目录应用场景详细代码步骤总结优化应用场景电子发票信息提取系统主要应用于以下场景:企业财务部门:需

javascript fetch 用法讲解

《javascriptfetch用法讲解》fetch是一个现代化的JavaScriptAPI,用于发送网络请求并获取资源,它是浏览器提供的全局方法,可以替代传统的XMLHttpRequest,这篇... 目录1. 基本语法1.1 语法1.2 示例:简单 GET 请求2. Response 对象3. 配置请求