初识HTML（九）——表格

最新推荐文章于 2021-06-19 09:19:40 发布
最新推荐文章于 2021-06-19 09:19:40 发布
阅读量218 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45927758/article/details/107197515
版权

<table></table>标签定义表格

<tr></tr>标签定义表格的行

<td></td>标签定义表格的格子

“boarder”属性定义表格的边框以及他的宽度

<html>

<body>
<h4>一行三列：如果不定义边框属性表格就没有边框</h4>
<table >
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>带有普通的边框：td标签是格子，tr标签是行</h4>  
<table border="1">
<tr>
  <td>First</td>

</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有粗的边框：</h4>  
<table border="8">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有很粗的边框：</h4>  
<table border="15">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

如果不希望有上述第二种表格的情况，最好加上一个空的<td></td>(或者添加&nbsp空格符)标签，让空的格子出来。

<th></th>标签定义表头标签

<html>

<body>

<h4>表头：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th>电话</th>
  <th>电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直的表头：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

 

 <caption></caption>定义表格标题

<html>

<body>

<h4>这个表格有一个标题，以及粗边框：</h4>

<table border="6">
<caption>我的表格</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>

<th></th>的colspan和rowspan属性定义跨列或者跨行的表格

<html>

<body>

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

 

秃头的毛睿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML学习篇（七） 表格
豪阁的个人博客
03-17 210
&lt;table&gt;、&lt;tr&gt;、&lt;td&gt;等 在HTML5中，使用table标签来显示表格，tr标签表示表格中的一行内容，而td标签则代表每个表格单元： &lt;table&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&a
HTML（四）表格
Insane_Loafer的博客
09-30 146
表格 表格：table、caption、tr、th、 td、border、width等 作用：用于表格、行、列、宽度、边框的制作 示例：制作商品库存表 table 表格标签 caption 大标题，要写在table标签下面 tr 代表行 th 加粗居中的单元格 td 为普通单元格 border属性 边框 width属性 宽度 例子： <html> <head> <title>first.html</title> </head> &l
HTML中margin、padding和border的区别
青梅煮码
11-25 1万+
前端页面是需要给用户展示信息的，是离不开布局的，但是各个标签也不会挤在一起，有的标签距离很远有的很近，有的还有边框，这就需要调试出来了，其中margin、padding和border就是HTML中最常用的边框调试属性了。margin是设置两个标签的间隔，也就是距离；padding这个是比如一个p标签，它是100px*100px,我们使用的时候p标签的文字是贴着p标签的最左侧的，想要它的文字距离边界
html定义margin,HTML中margin padding border区别
weixin_39602560的博客
06-19 215
人生苦短 我用python开始愉快的享(代)受(码)时间:image前言:前端页面是需要给用户展示信息的，是离不开布局的，但是各个标签也不会挤在一起，有的标签距离很远有的很近，有的还有边框，这就需要调试出来了，其中margin、padding和border就是HTML中最常用的边框调试属性了三者比较理解:margin是设置两个标签的间隔，也就是距离；padding例如一个p标签，它是100px10...
html中border的作用,border在html中是什么意思
weixin_42131601的博客
06-11 1万+
border在html中的意思：border属性是在一个声明中设置所有边框属性，语法为【Object.style.border=borderWidth borderStyle borderColor】。本教程操作环境：windows7系统、html5版，DELL G3电脑，该方法适用于所有品牌电脑。border在html中的意思：border 属性在一个声明中设置所有边框属性。语法：Object....
Html-浅谈如何正确给table加边框（转）
热门推荐
无心人的终点
08-03 2万+
https://www.cnblogs.com/leona-d/p/6125896.html 一、 &lt;table border="1"&gt; 表格边框 如图：，也就是border=1，意思就是给表格的每一格，及边框加上1像素的边框   二、 &lt;table border="1" cellspacing="0"&gt; cellspacing单元格间距 如图：这时表格大小为：2...
html语言border,htmlborder长度 css中border的属性
weixin_36465618的博客
06-02 1044
css中border-solid长度问题html的border可以设置显示百分之几长的吗不能，border是显示边框宽度的，不是调节长度的。试过，不能用百分率来调节。望喜欢。请问HTML语句中“border=1”是什么意思，。css中border的属性css中boder的颜色、厚度、宽度、高度怎么设置CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。 在表格中：bor...
初识Spring——Spring核心容器
02-24
IOC-InversionofControl，译为控制反转，是一种遵循依赖倒置原则的代码设计思想。所谓依赖倒置，就是把原本的高层建筑依赖底层建筑“倒置”过来，变成底层建筑依赖高层建筑。高层建筑决定需要什么，底层去实现这样的...
初识软件工程——《构建之法——现代软件工程》
01-06
从老师的推荐中，我选择了这本《构建之法——现代软件工程》，他向我展现了一个新的世界，让我有了新的认知，同时也带来了新的探索。  刚拿上手时，就被作者那有趣的文风所吸引，与之前阅读的资料有着天壤之别，让...
初识HTML5，认识html
最新发布
03-05
【初识HTML5，认识HTML】 HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，是用于创建网页的标准标记语言。自2014年正式发布以来，HTML5已经成为现代网页开发的核心，它极大地提升了用户体验，...
九九口诀乘法表.html
11-06
简单示例的HTML代码，方便初学者的学习和应用，希望有所帮助。
JS随机颜色生成9x9乘法表.zip
05-27
JS随机颜色生成9x9乘法表，每次刷新页面产生不同颜色。
初识Python——基本图形绘制
12-21
在Python编程中，初学者经常会接触到turtle库，这是一个非常实用且有趣的模块，它允许我们创建基本的图形和图像。在本文中，我们将深入探讨turtle库的一些核心概念和功能。 首先，turtle库概述：turtle库是Python...
HTML <table> border 属性
BeautifulApple的博客
12-12 5908
浏览器支持 所有主流浏览器都支持 border 属性。 定义和用法 border 属性规定表格单元周围是否显示边框。 值 "1" 指示应该显示边框，且表格不用于布局目的。 HTML 4.01 与 HTML5之间的差异 在 HTML5 中，border 属性仅用于指示表格是否用于布局目的，且只允许属性值 "" 或 "1"。 语法 &lt;table border="1"&gt; ...
盒子模型
December_shi的博客
09-13 434
盒子模型（CSS重点） 1.盒子边框（border） 语法： border:border-width || border-style || border-color 属性 作用 border-width 定义边框粗细，单位是px border-style 边框的样式 border-color 边框颜色 边框的样式： none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线（最为常用的） dashed：边框为虚线 dotted：边框为点线 2.
HTML关于border属性的一点小领悟
wolfalcon的专栏
06-12 1万+
在写HTML的时候我们经常会想变换border的颜色或者风格。大多数时候我们是这样做的。我们为这里的li设置了一个border，然后我们现在想改变border-bottom的颜色。通常我们会有两种做法：左侧截图中的方法能够改变border-bottom的颜色，而右侧和下侧截图这种两种方式border-bottom的颜色将不会发生变化。如果想改变border-bottom的颜色，又不想在原来的CSS...
（9）HTML表格
mxd
04-17 388
（一）表格元素
html写九行五列表格,8.html表格相关的标记9.html表格实战《简单的网页布局》
weixin_33725576的博客
06-19 365
第八课标题表格 表格的标题班级姓名年龄成绩四年级一班张三1680四年级一班李四14四年级一班王五1850班级姓名年龄成绩四年级一班张三1680四年级一班李四1490四年级一班王五1850第八课标题网页之战布局网页的头部网页的左部分网页的右部分网页的底部涉及的知识：1、topmargin="0" 你设计的框架里网页上方的距离是多少0就是没有(英文翻译上边距)2、leftmargin="0" 你设计的...
"物联网初识与发展——从定义到应用
物联网是指通过互联网连接各种实体物体，实现智能化识别和管理的信息传感网络。它的发展使得世界上所有的物品都可以通过因特网进行交换和互动，实现了物与物的连接和交流。1995年，比尔·盖茨在《未来之路》一书中就...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值