【HTML】随笔-<table>对象相关

最新推荐文章于 2024-08-20 10:31:33 发布
最新推荐文章于 2024-08-20 10:31:33 发布
阅读量223 收藏 1
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flowing_wind/article/details/90372427
版权 
<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

th是标题，tr是行，td是列
<table>定义HTML表格
1、属性align

<table border="1" align="right">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

运行结果如下
在这里插入图片描述
在这里插入图片描述
2、bgcolor

<html>
<body>

<table border="1" bgcolor="#00FF00">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

<p>在 HTML 4.01 中，不赞成使用 body 元素的 bgcolor 属性；在 XHTML 1.0 Strict DTD 中，不支持 body 元素的 bgcolor 属性。</p>

</body>
</html>

运行结果：
在这里插入图片描述
改变表格的背景色。
3、border规定表格边框的宽度

<html>
<body>

<table border="5">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

运行结果：
在这里插入图片描述
将border属性改为10后的结果
在这里插入图片描述
4、cellpadding属性规定单元边沿与其内容之间的空白

<html>

<body>

<h4>没有 cellpadding：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellpadding：</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

运行结果：
在这里插入图片描述
前面一个是没有cellpadding属性的，后面是加上cellpadding属性的和周围边框之间加入了空白。
5、cellspacing属性规定单元格之间的间隔

<html>

<body>

<h4>没有 cellspacing：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellspacing：</h4>
<table border="1" 
cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

运行结果：
在这里插入图片描述
6、frame规定外侧边框的哪个部分是可见的

<html>
<body>

<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

<p>Table with frame="box":</p>
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述
frame属性各个选项的表现
7、rules属性：规定内侧边框哪个部分是可见的

<html>
<body>

<p><b>注释：</b>rules 属性无法在 Internet Explorer、Chrome 或者 Safari 中正确地显示。</p>

<p>Table with rules="rows":</p>
<table rules="rows">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with rules="cols":</p>
<table rules="cols">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with rules="all":</p>
<table rules="all">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

</body>
</html>

运行结果：
在这里插入图片描述
8、规定表格的摘要

<html>
<body>

<table border="1" summary="Monthly savings for the Flintstones family">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

运行结果：
在这里插入图片描述
不会在浏览器中显示任何变化。
9、width规定表格的宽度

<html>
<body>

<table border="1" width="400">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

运行结果：
在这里插入图片描述

Billy12138
关注
专栏目录
项目随笔-ssm开发移动端小说评价网(仅个人学习)
moonlightpp的博客
02-24 664
前言: 博主开学进入大三下学期，目前备考计算机研究生,但是很坦诚地说,不一定能考上。因此，利用考研复习之余练习自己的后端开发技术也成了一种必要,考研失败坚决不二战,去外包当个crud boy也挺好。 简要说明ssm中各层的作用: 1.持久层 定义mapper接口，负责与数据库进行交互设计 2.业务层 定义service接口和service接口实现类,负责业务模块的逻辑应用设计 3.控制层 定义controller类,负责每个具体的业务模块流程控制 4.视图层 负责前台页面的展示，该项目采用Freemarke
bootstraptable获得所有行_Bootstrap Table 双击、单击行获取该行及全表内容
weixin_39695954的博客
12-20 952
什么是Bootstrap-table？在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card vi...
HTML+CSS小白入门与进阶教程
热门推荐
qq_29192703的博客
08-07 10万+
本文旨在让你快速了解HTML语法结构，通过实例操作快速从无到有的入门与进阶。Html语言学习的特点有点像刚开始学word软件，word的功能就像html标签，用多了就熟悉了，不常用的一些功能现学现用即可（你要不知道什么是标签的意思不要着急，下面会讲到）。 [注]本文使用的开发软件是Notepad++，我在文章的最后提供的所有需要素材和网站源码，但我希望你能在看完整篇文章后再去下载，文章中实验代码...
HTML入门（详细）
qq_63525426的博客
05-03 3万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML基础知识入门大全
最新发布
HTDiiii的博客
08-20 872
HTML 什么是 HTML HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于 web 开发者。HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。两端的标签可以使内容变成超链接，以连接到另一个页面；使字体表现为斜体等。 HTML 标签/元素 HTML 属性 第一个 HTML <!-- 文档的类型 ，根据类型可以知道当前文档的版本-->
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。
ZL_1618的博客
09-06 1万+
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
HTML（超详细）（图+文）
Czc1357618897的博客
01-12 1万+
HTML各个知识点超详解 ！！！
【HTML】HTML基础知识扫盲
弟弟的博客
10-30 4527
body > < dl > < dt > 标题 </ dt > < dd > 第一点 </ dd > < dd > 第二点 </ dd > < dd > 第三点 </ dd > </ dl > </ body >< body > < dl > < dt > 标题 </ dt > < dd > 第一点 </ dd > < dd > 第二点 </ dd > < dd > 第三点 </ dd > </ dl > </ body >
JavaScript学习（随笔）
gaofengyan的博客
01-14 343
学习JavaScript课程的目标： http://www.w3school.com.cn/html/html_form_elements.asp 1.使用JavaScript实现表单验证。 2.使用JavaScript制作网页广告特效。 3.使用JavaSctipt制作弹出窗口特效。 4.使用JavaScript实现时钟特效。 5.使用JavaScript实现级联显示功能。 6.使...
Python学习笔记：5.3.4 bootstrap框架
元文的博客
02-10 1967
本文主要讲解了bootstrap框架简介、响应式设计、bootstrap响应式布局、bootstrap组件等相关内容。
使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
xiaosachuchen的专栏
06-16 814
在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HT
html入门教程
打代码是一天，不打代码也是一天
03-17 4261
dl > < dt > 名词 < dd > 描述 …… < dl > < dt > 名词 < dd > 描述 …… < dt > 名词 < dd > 描述 …… < dl > < dt > 名词 < dd > 描述 ……
HTML基础学习
weixin_73870552的博客
12-04 2193
1.HTML简介HTML（Hyper Text Markup Language）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行语义化的描述。HTML和其他编程语言不同，HTML不是一门真正意义上的编程语言，而是一种标记语言，通过带有尖角号的标签对文本进行标记，从而实现网页的结构搭建。
HTML基础知识（超详细！）
qq_60950941的博客
04-18 2253
本文全面介绍了html的标签以及新增的html5标签，可以帮助人们在最短的时间里打下基础
HTML 概述
Dailyblue的专栏
03-29 2715
HTML 的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等。
HTML详细教程
qq_40046544的博客
10-17 8172
HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。HTML 的全名是超文本标记语言（HyperText Markup Language），上个世纪 90 年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网。1999 年，HTML 4.0.1 发布，成为广泛接受的 HTML 标准。
html基础知识
firenaimal的博客
04-06 2882
文本标签加粗加粗倾斜倾斜删除下滑线字体修饰标签有哪些？加粗
html对象介绍
hzf100的专栏
05-09 590
2、呼入用户信息 ：在字段集包含的文本和其它元素外面绘制一个方框。：在fieldSet 对象绘制的方框内插入一个标题。3、去除全屏滚动条问题4、解决打开用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。要配合，不然会打开一个新的IE窗口，然后再关掉的。在一个框架（frame）页中，如果要把某个框架的连接在另外一个框架显示，例如，把
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</tit1e> </head> <body> <div style="width: 980px;margin: 0 auto;"> <div> <div style="height: 56px;"> <img src="images/logo.png" align="left"> <p align="right">我的博客  |  攻略&nbsp； |  随笔</p> </div> <hr color="#ccc"> </div> </div> </body> </html>
03-26
"> <ul> <li><a href="#">博客首页</a></li> <li><a href="#">技术文章</a></li> <li><a href="#">生活随笔</a></li> <li><a href="#">我的相册</a></li> </ul> </div> <div style="float: left;width: 780px;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值