HTML表格的一部分代码

最新推荐文章于 2024-03-20 22:32:05 发布
最新推荐文章于 2024-03-20 22:32:05 发布
阅读量293 收藏 1
点赞数 1
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wusiye_123456/article/details/83064760
版权

1.最原始的表格代码 


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>好好学习天天向上</title>
</head>
<body>
	<h3>我要做一个三行三列的表格</h3>
	<table width="500" height="300" border="1" cellspacing="0" cellpadding="30" align="left">
		<tr><!--为第一行的三个单元格-->
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
		
		</tr>
		<tr><!--为第二行的三个单元格-->
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
		
		</tr>
		<tr><!--为第三行的三个单元格-->
			<td>姓名</td>
			<td>性别</td>
			<td>年龄</td>
		
		</tr>
	</table>	
</body>
</html>

2.表格的表头标签与表结构


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>好好学习天天向上</title>
</head>
<body>
	<h3>我要做一个三行三列的表格</h3>
	<table width="500" height="300" border="1" cellspacing="0" cellpadding="30" align="left">
	<caption>统计学生</caption><!--标题-->
	<thead>
		<tr><!--第一行突出显示-->
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>王洪岩</th>
			<td>女</td>
			<td>21</td>
		
		</tr>
		<tr>
			<th>李赫</th>
			<td>女</td>
			<td>20</td>
		
		</tr>
	</tbody>
	</table>	
</body>
</html>

 3.合并单元格


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>好好学习天天向上</title>
</head>
<body>
	<h3>我要做一个三行三列的表格</h3>
	<table width="500" height="300" border="1" cellspacing="0" cellpadding="30" align="left">
	<caption>统计学生</caption><!--标题-->
	<thead>
		<tr><!--第一行突出显示-->
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>王洪岩</th>
			<td>女</td>
			<td rowspan=2>20</td>
		
		</tr>
		<tr>
			<th>李赫</th>
			<td>女</td>
			
		
		</tr>
	</tbody>
	</table>
	<h3>我要做一个三行三列的表格</h3>
	<table width="500" height="300" border="1" cellspacing="0" cellpadding="30" align="left">
	<caption>统计学生</caption><!--标题-->
	<thead>
		<tr><!--第一行突出显示-->
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		
		</tr>
	</thead></br>
	<tbody>
		<tr>
			<th>王洪岩</th>
			<td>女</td>
			<td>20</td>
		
		</tr>
		<tr>
			<th>李赫</th>
			<td colspan="2">女</td>
			
		
		</tr>
	</tbody>
	</table>	
</body>
</html>

 

wusiye_123456
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML表格代码的示例
12-20
这是利用HTML表格代码制作出来的一个表格。
HTML表格的代码和属性,[转载]html表格代码、标签及属性
weixin_35952929的博客
06-04 236
多层宽边框代码cellPadding=0 width=900 bgColor=#8b0000 border=1 collapse?BORDER-COLLAPSE:>borderColorDark=#ffd700 cellPadding=0 width=835 bgColor=#ffd700borderColorLight=#ffd700background=http://www.coolho...
HTML表格代码
08-14
html的表格代码，主要是很多需要制作网页的人会需要这个东西！所以！来拿走吧！
HTML基本表格部分
qq_45572615的博客
05-21 116
1、3行2列 <table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>4</td> <..
JavaScript根据json生成html表格的示例代码
01-19
而且大部分都是生成表格，直接通过字符串拼接的话，代码的可复用性太低的，所以写了个通用的json转html表格的工具。 代码 htmlKit = { _tags: [], html: [], _createAttrs: function (attrs) { var attrStr = ...
HTML多表头表格代码
12-14
HTML中的表格是展示数据的一种常见方式，特别是...通过理解这段代码，我们可以学习到HTML表格的基本结构、表头单元格的跨行和跨列属性，以及如何用CSS美化表格样式。这对于网页设计和数据展示是非常基础且重要的技能。
详解HTML表格|l-639642.pdf
11-20
下面将详细解析HTML表格的各个组成部分、属性以及最佳实践。 1. **基本表格结构**： HTML表格由`<table>`标签开始，用于定义表格整体。在`<table>`内部，通常包括`<tr>`（表格行）、`<td>`（表格数据单元格）和`...
jQuery实现点击该行即可删除HTML表格行
11-30
`：这部分代码改变了触发点击事件的行的背景颜色，使其变为红色，提供视觉反馈，让用户知道他们点击了哪一行。 5. `.fadeOut(400, function() {...})`：此方法让当前行渐渐消失，参数400表示动画的持续时间（以毫秒...
html 简单表格代码
热门推荐
weixin_42630877的博客
07-17 4万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table style="withd:600px" border="1"&gt; &lt;capti
代码学习（HTML 表格）
2302_79101294的博客
08-01 1346
属性：tybe：序号样式(比如"A"就变成了大写字母)​ start：起始序号​ reversed：倒叙caption：表格的标题(在表格的开头写)​ tr与td：定义表格 行 和 列​ th：定义表格的标题栏（文字加粗）​ border：页边框​ rowspan：合并单元格 行​ colspan：合并单元格 列​ cellspacing：调整单元格和单元格之间的间距。
html表简单代码,简单的html表格处理代码
weixin_42460407的博客
06-07 331
就是动态的处理表格var n=0;function changeButton(){if(n==1){for(i=0;i<3;i++)for(j=0;j<2;j++){var x=document.getElementById('myTable').rows[i].cells;var y=document.getElementById('ad');x[j].innerHTML=y.val...
HTML_表格
dolola的博客
01-20 378
表格标题               其中会存在跨行、跨列的情况存在。 跨行时，即一个表格可能对应着多列表格，此时使用colspan、rowspan。 我们以跨两行为例，以上代码第三行应修改为 以跨两列为例，以上代码第四行代码应修改为 关于边框，由border定义，不写和border="0
HTML 之表格
loverlucky
01-31 994
HTML 之表格 表格的基本结构 在 HTML 中加入加入表格，有下列三个步骤 设置表格 -> 设置行数目 -> 设置列数目 设置表格的标记为 table ，设置行的标记为 tr ，设置列的标记为 td 。table 标记的 border=”1” 属性用来设置是否显示表格边框线。举例如下： table border="1"> tr> td>第 1 行，第 1 栏td>
精美表格html代码
郝大侠的博客
12-16 1万+
在做前台html中我们经常用到一些表格，苦逼的后台程序猿大多都简简单单的写一些标签，下面分享一下只用h5就能写出一些精美的form &amp;lt;form action=“” method=“”&amp;gt; &amp;lt;fieldset&amp;gt; &amp;lt;legend&amp;gt;Insert the title&amp;lt;/legend&amp;gt; &amp;lt;div align=“Cen
带网页表格的html简单代码附上
xiezhiming1234的博客
10-05 1万+
&amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;meta http-equiv=&amp;quot;Content-Type&amp;quot; content=&amp;quot;text/html; charset=utf-8&amp;quot;&amp;amp;gt; &amp;amp;lt;body&amp;amp;gt; &amp;amp;lt;table width=
html-表格
最新发布
2301_78251908的博客
03-20 1044
一部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置相关属性。border="1",用来设置表格的边框，没有这个属性，边框不显示。一个完整的表格包含三个部分：表格标题，表格表头，表格主体。thead：定义表格的头部，内部嵌套tr>th。tbody：定义表格的主体,内部嵌套td>td。td：table dock：定义表格的单元格。table：表格，作用是定义一个表格的结构。tr： table rows：定义表格的行。th可以设置表头，可以使用tr>th设置。关系：table > tr >td。
HTML 表格表单代码实例（个人简介表）
qq_53400553的博客
06-08 5661
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title&...
Html中的表格
06-25 3077
在说起表格之前，先看几幅通过Html做出来的效果图。   Html表格       接着进入正题，其实上图实现的过程很简单，只需要掌握Html表格的属性就OK了。然后就是通过Html表格的属性来拼接出表格，然后通过更改表格的颜色最终出现了上述所示的图形。   Html表格的基本结构   …:定义表格   …:定义表行   …:定义表列   …:定义标题栏（文字加粗）   Ht
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值