HTML随笔0527 关于表格

最新推荐文章于 2024-05-15 20:01:25 发布
最新推荐文章于 2024-05-15 20:01:25 发布
阅读量76 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/zxy52/p/10931805.html
本文主要介绍了HTML中表格的相关知识，包括表格的结构，如tr表示行、td表示单元格等，还给出了多个表格实例，展示了表格的不同样式和属性设置，如cellpadding、cellspacing等，同时提到了合并单元格的方法，最后分享了注释和tab快捷键的应用。

HTML关于表格

表格的结构：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格一定是工整的-->
<table border="1px" width="700px" height="500px" align="center">
<!--写了一个tr就表示一行-->
<tr align="center">
<!--写了一个td就表示一个单元格，第一行有多少个单元格，第二行就必须有多少个-->
<td><b>姓名</b></td>
<th>性别</th>
<td>年龄</td>
<td>爱好</td>
<td>婚否</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

</body>
</html>

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>萌萌的狗子</title>
</head>
<body>
<table border="10" width="500" height="500" bgcolor="red" align="center">
<caption>萌萌的狗子</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>品种</th>
</tr>
<tr align="center">
<td>旺财</td>
<td>雄性</td>
<td>3</td>
<td>哈士奇</td>
</tr>
<tr align="center">
<td>球球</td>
<td>雌性</td>
<td>5</td>
<td>阿拉斯加</td>
</tr>
<tr align="center">
<td>七月</td>
<td>雌性</td>
<td>10</td>
<td>金毛</td>
</tr>
</table>
</body>
</html>

如图：

 

实例2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>萌萌的狗子</title>
</head>
<body>
<table border="10" cellpadding="1" cellspacing="2" align="center">
<caption>萌萌的狗子</caption>
<tr>
<th colspan="2">姓名</th>
<!--<th>性别</th>-->
<th>年龄</th>
<th>品种</th>
</tr>
<tr align="center">
<td rowspan="2">旺财</td>
<td>雄性</td>
<td>3</td>
<td>哈士奇</td>
</tr>
<tr align="center">
<!--<td>球球</td>-->
<td>雌性</td>
<td colspan="2" rowspan="2">5</td>
<!--<td>阿拉斯加</td>-->
</tr>
<tr align="center">
<td>七月</td>
<td>雌性</td>
<!--<td>10</td>-->
<!--<td>金毛</td>-->
</tr>
</table>
</body>
</html>

如图：

 其中

<!--cellpadding 这个是单元格里面的内容距离单元格边框的距离-->
<!--cellspacing 这个是单元格与单元格之间的距离-->
<!--一般情况下设置了这两个属性以后就不会去设置table的width和height-->

 

rowspan="2" colspan="2"分别表示合并两竖行单元格，合并两横行单元格。

 

 今天收获：

1.注释快捷键：ctrl+/

2.tab快捷键的应用：当输入td*4加上tab会得到<td></td>

                                                                         <td></td>

                                                                        <td></td>

                                                                       <td></td>

 

转载于:https://www.cnblogs.com/zxy52/p/10931805.html

[随笔] HTML/CSS-简单表格样式
zhaoweihao的博客
11-02 1271
一个简单的CSS表格样式 表格： <div class="table-area fjcenter formating"> <table class="my-table"> <thead> <tr> <th>编号</th> ...
html 表格输出excel,html中导出excel表格
weixin_32601635的博客
06-22 1088
如果在页面上展示了一个数据表格，而用户想把这个表格导出为Excel文件，那么在要求不高的情况下，可以不通过服务器生成表格，而是直接利用JavaScript的Blob和Object URL特性将表格导出。不过，丑话说在前头，这篇随笔中利用了Excel能打开HTML文档的特性，所以导出的表格实际上是一个HTML文档，并且其扩展名只能为.xls，而不能是.xlsx，否则Excel无法打开。(不过确实见过...
html 表格中加按钮,HTML 表单按钮
weixin_39593247的博客
05-31 5259
(本次随笔仅作为学习用途)表单按钮1.表单按钮一般分为三类，分别是提交按钮、重置按钮和普通按钮。提交按钮、重置按钮只能在表单中使用，普通按钮则可以在网页的任何地方使用。2. 从本质上讲，表单按钮也是表单控件，之所以把它分离出来，单独介绍，是因为它的功能比较特别。提交按钮用于把表单数据发送到服务器，重置按钮用于重置整个表单的数据，普通按钮则需要开发者赋予它功能。3. 当用户点击提交按钮和重置按钮时...
学习随笔——HTML表格——2020.11.12
weixin_43402353的博客
11-12 467
学习随笔——表格——2020.11.12 （一）表格的基本元素 table表格标签 tr：表格的行（tr是table row（表格行）的缩写 td：单元格（td是“table data（表格数据）的缩写 数据单元格：包括文本，图片，列表，段落，表单，水平线，表格等等 <table>...........表格开始标签 <tr>.....行开始标记 <td></td>单元格标记 </tr>.....行结束标记 <tr> &
HTML随笔
wjsn520的博客
05-18 139
表格中的colspan和rowspan： colspan和rowspan这两个属性用于创建特殊的表格。 colspan用来指定单元格横向跨越的列数：colspan就是合并列的，colspan=2的话就是合并两列。 rowspan用来指定单元格纵向跨越的行数:rowspan就是用来合并行的，比如rowspan=2就是合并两行。 rowspan通常使用在td和th标签中 row:行,span:跨度,跨距,范围 col:列,span:跨度,跨距,范围 <html> <head> &lt
html表格于列表,HTML表格与列表
weixin_31763817的博客
06-20 244
HTML表格表格其实就是很多的小单元格，而这些小单元格很有次序的排列着，它们有很多行，很多列。这些很多行列组成的东西，就叫表格，表格是标签来定义的。而标签中的行就是标签，而列就是标签，必须先定义行才能定义列。因为html中，每一列是在一行当中的。下表总结了一些常用的标签：表格描述定义表格定义表格标题定义表格的表头定义表格的行定义表格的单元定义表格的页眉定义表格的主体定义表格的页脚定义表格的列属性先...
HTML整合随笔
乘风晓栈的博客
09-10 557
本文为根据动力节点学习课件编写随笔，开发随时编写补充。 第1章 HTML概述 1.1 HTML是超文本标记语言，Hyper Text Markup Language (1) 超文本：有流媒体、图片、声音的存在 (2) 标记语言：所有标记语言都由标签组成，有爱上标签也有结束标签，例如：<html></html>、<body&gt...
HTML学习随笔
codehorse
08-17 221
一、html入门 <!--!DOCTYPE:代表网页的标准--> <!DOCTYPE html> <html lang="en"> <!--head：头部信息--> <head> <!--meta : 描述性标签,一般用来做seo优化的.--> <meta charset="UTF-8"> <meta name="description" content="学习html"> <!-- tit
HTML随笔（一）
qq_54898506的博客
03-01 661
HTML 超文本标记语言（文字外，还包括图片，音频，视频，动画等等） HTML的优势 世界知名浏览器厂商对HTML5支持 市场需求 跨平台 w3c标准 ​ 万维网联盟 结构化标准语言 HTML xml 表现标准语言 css 行为标准 dom ecmascript 常见ide Dreamweaver webstorm HTML基本结构 <!--dcotype:告诉浏览器，我们要使用什么规范 --> <!DOCTYPE html> <html lang="en"
使用bootstraptable插件实现表格记录的查询、分页、排序操作
12-10
在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，...
jQuery表格插件
04-01
在网页中集成jQuery表格插件，可以轻松地将静态的HTML表格转换为具有多种功能的动态组件。 以下是一些常见的jQuery表格插件及其特性： 1. **DataTables**：DataTables是一款功能强大的表格插件，它支持服务器端...
【前端】实习随笔2 - 数据统计 - 商品维度订单统计
2401_84094908的博客
05-15 439
（10）数据过多，分页展示；每页100条；（11）统计：展示搜索的累计订单数，订单数为当前筛选条件下所有页面数据的总和（例如有10页数据显示的是10页的试听课订单数总和），并非当前1页的数据总和。一、页面实现。
二维码工具(1).zip
最新发布
09-13
二维码工具(1).zip
基于ZXing修改的二维码扫描器.zip
09-12
基于ZXing修改的二维码扫描器.zip
在网页上生成二维码.zip
09-12
在网页上生成二维码.zip
四级流水线8位booth算法乘法器，有无符号都支持（verilog），含testbench（system verilog）
09-12
乘法器包含三个.v文件 乘法器可进行有符号与无符号的8位乘法计算，但是需要提前输入乘数是否为有符号的标识 【 顶层multiplier_8_special.v：对乘法器进行分割段数 booth2_pp_decoder.v:使用booth算法，将乘数进行转换 mult_pp_adder.v:执行部分积加法。（这里经过了部分优化，但是仍直接使用了‘+’符号，如果是asic设计，需要更加具体，也能进一步优化） tb_mult8_special.v:(tesetbench):仿真激励文件：20*4组随机数测试数据，会返回验证时出错的数据的部分原因。（system verilog） 】 经过初步仿真验证，无问题 经过vivado某个ultrascale型号的fpga实现过后能达到500mhz以上频率，资源使用量为120lut左右 此模块为tpu设计中的一个底层模块，（作为多复用单元，可以处理浮点数据的一个部分）后续会逐步上传tpu的其他部分以及功能原理介绍 注：sys_enable:模块启动信号，sys_enable=0时会暂停并暂存数据。 valid：valid=1输入乘数有效，valid=0无效则会不计算这个数据。
无限特征选择_一种基于图的特征过滤方法_Infinite Feature Selection_ a Graph-base
09-12
无限特征选择_一种基于图的特征过滤方法_Infinite Feature Selection_ a Graph-based Feature Filtering Approach.zip
达芬奇手术机器人阻抗控制的MATLAB仿真_MATLAB simulation of Impedance control
09-12
达芬奇手术机器人阻抗控制的MATLAB仿真_MATLAB simulation of Impedance control on da Vinci Surgical Robot.zip
自己写的二维码App.zip
09-13
自己写的二维码App.zip
HTML技术讲述的本世纪爱情故事
由于标签是HTML，并且标题和描述都指向了“本世纪的爱情故事”，可以合理推测该网页可能包含一系列关于爱情主题的文章、随笔、故事或者诗歌。这些内容可能是由某个个人作者所创作，或者是通过集体创作的方式呈现。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值