2.1HTML网页之table标签A

最新推荐文章于 2024-04-19 20:39:07 发布
最新推荐文章于 2024-04-19 20:39:07 发布
阅读量340 收藏 1
点赞数
分类专栏： 前端 文章标签： HTML网页之table标签A
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BossHAO/article/details/100939407
版权

2.1HTML网页之table标签A

描述：表格标签
1.格式如下

	  <table>
	  	<tr>
	  		<td></td>
	  	</tr>
	  </table>

​ 解析： table标签，告诉浏览器，以表格的形式进行解析并显示
​ tr — 行
​ td — 列
​ 注意：td 要写在tr内部 不要和tr平行
​ 快速生成一个N行N列的表格 作用：提高开发效率 Eclipse当中也能识别
​ table>tr4>td5 Tab
​ 问题：
​ 1.如果表格没有设置边框 border 那么浏览器无法正常显示
​ 为table表格添加边框 border = 1px
​ 2.每一行每一列，都是默认的宽和高
​ 设置表格的宽和高 width height
3.对于第一行的每一列设置了宽度 那么剩余的列会自动扩展
4.发现对于重复代码，我们需要重复的利用，减少代码量
CSS样式 — 1.标签选择器 2.类选择器
首先在head标签内，写一个 标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签</title>
		<style type="text/css">
		    /*标签选择器： 1 针对该网页所有的指定的标签样式进行更改*/
			tr{
				/*height="100px"*/
				height:100px ;
			}
			/*类选择器*/
			.t1{
				width: 100px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table border="1px" align="center">
			<tr>
				<td class="t1">1</td>
				<td class="t1">2</td>
				<td class="t1">3</td>
				<td class="t1">4</td>
				<td class="t1">5</td>
			</tr>
			<tr > 
				<td align="center">6</td>
				<td align="center">7</td>
				<td align="center">8</td>
				<td align="center">9</td>
				<td align="center">10</td>
			</tr>
			<tr >
				<td align="center">11</td>
				<td align="center">12</td>
				<td align="center">13</td>
				<td align="center">14</td>
				<td align="center">15</td>
			</tr>
			<tr >
				<td align="center">16</td>
				<td align="center">17</td>
				<td align="center">18</td>
				<td align="center">19</td>
				<td align="center">20</td>
			</tr>
		</table>
	</body>
</html>
不戴眼镜的眼镜男
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
a-table.js：用于生成表html的简单表UI
02-05
a-table.js 用于生成表格html的简单表格用户界面 安装 npm npm install a-table 独立的 < script src =" https://unpkg.com/a-table@1.4.10/build/a-table.min.js " > </ script > CSS < link rel =" stylesheet " href =" https://unpkg.com/a-table@1.4.10/css/a-table.css " > 字型 < link rel =" stylesheet " type =" text/css " href ="
JavaWeb——HTML基础标签table标签与form标签的学习与理解
01-08
使用表格标签制作规整的表格 table标签是表格标签， border属性设置表格的边框厚度， width属性设置表格的宽度， align设置表格的对齐方式， cellspacing设置单元格的间距 tr是行标签， td是单元格标签， th是字体居中加粗的单元格标签, b是字体加粗标签 下面制作一个3*3的表格，放置在页面中心，边框厚度为2，宽度为500，单元格内没有间距，并每一行使用不同的效果 规整的表格 1.1 1.2 1.3 2.1 2.2 2.3 3.1 3.2 3.3 截图 密码： 性别：男 女 技能：Java
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
最新发布
u013179804的博客
04-19 2178
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
网页设计参考 firefox 默认样式
01-19
虽然w3c制订了html的一些标准：浏览器们都会按照自己预定义的样式来解析渲染网页中的标签，firefox可以通过在地址栏里输入resource://gre/res/html.css的命令来得到firefox的默认样式表。要是ie也有这个命令该多好！你也可以在不同版本的firefox地址栏输入这个命令，这样就可以对比firefox不同版本的差异，这让我们在Reset CSS的时候有了重要的参考。 /* ***** BEGIN LICENSE BLOCK ***** * Version: MPL 1.1/GPL 2.0/LGPL 2.1 * * The contents of this file
HTML_CSS学习笔记.docx
07-15
基本的HTML操作，来自IMOOC的学习笔记。 1 1. HTML介绍 4 1.1. HTML与CSS的关系 4 1.2. 标签 4 1.3. HTML5文档结构 5 1.4. head标签 7 1.5. body标签 8 1.6. html注释 8 2. HTML5语义化标签 8 2.1. 语义化 8 2.2. 标签：段落标签 8 2.3. 标签：DIY一个标签 8 2.4. 标签：添加标题 9 2.5. 标签：自定义块 10 2.6. 标签：定义头部区域 11 2.7. 标签：定义底部区域 12 2.8. 标签：定义区段 12 2.9. 标签：定义侧边栏区域 13 3. HTML5效果标签 14 3.1. 标签：换行效果 14 3.2. 特殊字符&nbsp；实现空格效果 14 3.3. 标签：水平线效果 15 4. HTML5列表标签 15 4.1. 标签：实现无序列表 15 4.2. 标签：实现有序列表 16 5. HTML5图片，链接&表格标签 16 5.1. 标签：为网页添加图片 16 5.2. 标签：为网页添加超链接 17 5.3. 标签 target属性：在窗口中打开链接 17 5.4. 家族：为网页添加表格 18 5.5. 、、标签：定义表格的表头、表身、表尾 19 6. HTML5表单标签 20 6.1. 标签：创建表单，与用户交互 20 6.2. 输入框：文本输入框、密码输入框 22 6.3. :placeholder属性：输入框占位符——输入提示 23 6.4. number类型：数字输入框 23 6.5. url类型：网址输入框 24 6.6. email类型：邮箱输入框 24 6.7. 标签：创建文本域 25 6.8. 标签：为鼠标用户改进可用性 25 6.9. radio/checkbox：单选框、复选框 26 6.10. &标签：创建下拉菜单 27 6.11. submit类型：提交按钮 27 6.12. reset类型：重置表单信息 28 7. CSS3介绍 29 8. CSS3选择器 29 9. CSS3的继承、优先级&重要性 29 10. CSS3字体样式 29 11. CSS3文本样式 29 12. CSS3盒模型 29 13. CSS3布局模型 29 14. flex弹性盒模型 29 15. CSS3样式设置小技巧 29
HTML5+CSS3应用详解
12-14
Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站。我们可以在不使用内联<font>和<br>标签的基础上对网站添加漂亮而细腻的风格样式。事实上，我们目前的设计能力已经让我们远离了那个可怕的浏览器战争时代、专有协议和那些充满闪动、滚动和闪烁的丑陋网页。 虽然我们现在已经普遍使用了HTML4和 CSS2.1，但是我们还可以做得更好！我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。我们可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在，HTML5和CSS3正跃跃欲试的等待
HTML中表格标签＜table＞＜tr＞＜tb＞＜th＞中单元格的合并问题
weixin_73087898的博客
04-17 5364
老师有没有让你们设计一个课程表网页呀？
HTML中的table标签与a标签
weixin_64311421的博客
01-20 1324
table标签与a标签的小总结
html中td里面手动填充a标签,如何访问<TD>标签中的HTML标签的innerText
weixin_42162171的博客
06-20 895
我想从包含此的网页中获取一些文本。我想用href =“＃spec_Brand”获得这条信息。如何访问标签中的HTML标签的innerTextBrandBrandProducer of the product?我试图使用方法：Set TDelementsA = HTMLdoc.getElementsByTagName("TD")While r < TDelementsA.LengthIf TD...
vue-element系列 内table插入超链接 a 标签用法
Sunny_Future的博客
09-15 1万+
vue-element系列 内table插入超链接 a 标签用法 用法 可以去掉原<span>标签，使用<el-link>即可 <el-table-column :label="$t('es.cloud_url')" min-width="15px" align="center"> <template slot-scope="{row}"> <el-link :href="row.cloud_url" target="_blank"
vue 内table插入超链接 a 标签用法
weixin_45816407的博客
11-15 4538
第一种 <el-table-column label="链接" min-width="150px"> <template slot-scope="{row}"> <el-link :href="row.link" target="_blank" class="buttonText" type="primary" :underline="false">{{ row.link }}</el-link> </template> </e
HTML5和CSS3让网页设计提升到下一个高度
01-19
Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建 内容丰富的网站。我们可以在不使用内联<font>和<br>标签的基础上对网站添加漂亮而细腻的风格样式。事实上，我们目前的 设计能力已经让我们远离了那个可怕的浏览器战争时代、专有协议和那些充满闪动、滚动和闪烁的丑陋网页。虽然我们现在已经普遍使用了HTML4和CSS2.1，但是我们还可以做得更好！我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性。 我们可以缩减带给页面美丽外观样式代码量并让他们有更高的可扩展性。现在，HTML5和CSS3正跃跃欲试的等
038HTML-DOM对象.doc
11-30
Table 对象代表一个 HTML 表格，在 HTML 文档中，<table> 标签每出现一次，一个 Table 对象就会被创建。Table 对象的常用属性有： * cells：返回包含表格中所有单元格的一个数组 * rows：返回包含表格中所有行的一...
table a标签 颜色_HTML常用标签(二)
weixin_39674190的博客
12-05 396
A(anchor)标签的用法：常用属性href(Hyper Reference)属性，其值可以是锚点、超文本链接来源、伪协议a、当跳转为一个地址时，下面任何一个地址均可：<a href="http://www.zhihu.com">知乎</a> <a href="https://www.zhihu.com">知乎</a> <a href="//...
Table 标签详解
热门推荐
_
02-11 3万+
<table>在HTML 中定义了表格布局。说到 table 标签，我们可以想到的大致有以下几个元素：<tr>、<th>、<td>、<thead>、<tbody>、<tfoot>接下来，我们看看每个元素有什么用，使用后会有怎样的效果。 table 的基本使用 1.<table> <!DOCTYPE html> <html><head><meta charset=".
table标签
qq_50931436的博客
05-30 7561
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
IT1995的博客
06-16 7055
效果是这样的： 这里的文章标题和查看都可以进行跳转。 其中对应的代码如下： <template style="height: 100%"> <el-table :data="this.tableDataList" height="95%" style="width: 100%" :row-style="iRowStyle" :cell-style="iCellStyle"
详述table标签
飞翔的企鹅的博客
09-24 3190
HTML中的表格 我们常常会使用到Excle表格，可以非常直观的 建立、操作、删除表格数据（如下图）。 那么如何在html文件中创建一个表格呢？ HTML表格由table标签以及一个或多个tr、th或td标签组成： table标签用来定义表格，整个表格包含在<table>和</table>标签中 tr标签用来定义表格中一个行，它是单元格的容器，每行可以包含有多...
python如何把网页的table标签导出为Excel
04-20
你可以使用Python中的pandas库来读取网页中的table标签，然后将其导出为Excel表格。具体步骤如下： 1. 安装pandas库：在命令行中输入"pip install pandas"安装pandas库； 2. 使用pandas的read_html()函数读取网页的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值