HTML中的表格咋样创建？

最新推荐文章于 2024-08-17 14:58:02 发布
最新推荐文章于 2024-08-17 14:58:02 发布
阅读量145 收藏
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45276056/article/details/105045664
版权
一. HTML中的表格(table)有哪些元素？
(1)元素：
table-表格		tr-行		td-列	border-边框				cellpadding-单元格边距		
cellspacing-单元格间距		th-表头		caption-表格标题		rowspan-行合并	
colspan-列合并	border-collapse:collapse/separate-边框分隔	border-spacing-边框间距
(2)代码结构：
<table  cellspacing="单元格间距"  cellpadding="单元格边距">------在table中创建内容
	<tr>--------------表格的行
		<td>XXXXXXXX</td>-------表格的列
		<td>XXXXXXXX</td>
		<td>XXXXXXXX</td>
</tr>
<tr>
		<td>XXXXXXXX</td>
		<td>XXXXXXXX</td>
		<td>XXXXXXXX</td>
</tr>
注释：这结构表示两行三列，只有tr和td一起出现才有表格的效果。
   </table>
(3)代码演示：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格</title>
		<style>		/* 样式设置 */
		.tablelist03{
		width: 800px;
		height: 200px;
		border: 1px solid black;
		background-color: #BDDDDD;
		margin: 30px auto;
	}
	.tablelist03 caption{
		font-size: 20px;
		font-weight: 600;
	}
	.tablelist03 td{	
		border: 1px solid black;
		text-align: center;
		font-weight: 500;
		font-size: 20px;
	}
	.tablelist03 .bgcolor{
		background-color: #9BD7E9;
	}
		</style>
	</head>
	<body>
		<table  class="tablelist03" cellspacing="0" >
			<caption>第三个表格信息</caption>
			<tr>			
				<td colspan="4">1204班网页设计课</td>
			</tr>
			<tr class="bgcolor">
				<td colspan="2">第一学期成绩表</td>				
				<td colspan="2">第二学期成绩表</td>		
			</tr>
			<tr>			
				<td>平面设计</td>	
				<td>三维设计70</td>	
				<td>网页设计80</td>
				<td>动画设计70</td>	
			</tr>
		</table>
		</body>
效果图展示：

在这里插入图片描述
希望对你有收获，记得点赞。

AC_meimei
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何创建HTML表格
简单.专注..
11-12 241
HTML表格用&lt;table&gt;表示。一个表格可以分成很多行(row)，用&lt;tr&gt;表示；每行又可以分成很多单元格(cell)，用&lt;td&gt;表示。 这三个Tag是创建表格最常用的Tag。 示例 border属性 在缺省情况下，如果不设置表格的边界，表格是不显示边界的。 示例：不显示边界的表格 要显示表格的边界，可使用border这个属性。 示例：显示边...
html如何创建表格.1
weixin_45730641的博客
11-29 344
所有表格的内容都要放在<table></table>标签里 <table></table> .表格的主要目的是用来显示特殊数据的 ·一个完整的表格有表格标签(table)，行标签(tr),単元格标签(td)组成， .没有列的标签<tr></tr>中只能嵌套<td></td>类的単元格 ·...
html表格的建立
qq_41722101的博客
02-02 317
&amp;amp;lt;table width=&amp;quot;200&amp;quot; border=&amp;quot;1&amp;quot;使表格有了边框&amp;amp;gt; &amp;amp;lt;tr&amp;amp;gt; &amp;amp;lt;td&amp;amp;gt;姓名&amp;amp;lt;/td&amp;amp;gt; &amp;amp;lt;td
HTML表格的建立
JYHaaaa的博客
01-28 255
网页中有很多类似于图片链接，今天想分享的是一个很简单的用表格做字的背景图片的方法。       联系我们   table里的属性设置表格的大小以及颜色，如果想要给字体加颜色或者设置大小的话，可以直接给class样式，或者选择标签来定义颜色。
HTML（五）——建立表格
程序员的时光
03-04 670
1.表格的基本结构 建立表格需要用到&lt;table&gt;&lt;/table&gt;标签； &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;
html怎么创建表格,html怎么做表格
weixin_42495504的博客
07-02 6345
html做表格的方法：首先新建一个html，并在“”中间填入表格内容；然后在“”中间输入样式表的样式；最后设置单元格的宽度高度等等样式即可。本文操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑html做个表格的步骤如下：1、首先新建一个html，点击中间，先填入表格内容；2、内容根据需求来写即可，示例代码如下：功课表语文7:00-7:407:50-8:3...
13-动态创建表格.html
02-15
13-动态创建表格.html
12-动态创建表格.html
02-15
12-动态创建表格.html
10-动态创建表格.html
02-15
10-动态创建表格.html
02-动态创建表格.html
02-15
02-动态创建表格.html
05动态创建表格.html
05-23
输入行数和列数可以直接创建表格
html5表格制作教程,html怎么做表格
weixin_32778881的博客
06-05 7475
html做表格的方法：首先新建一个html，并在“”中间填入表格内容；然后在“”中间输入样式表的样式；最后设置单元格的宽度高度等等样式即可。本文操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑html做个表格的步骤如下：1、首先新建一个html，点击中间，先填入表格内容；2、内容根据需求来写即可，示例代码如下：功课表语文7:00-7:407:50-8:3...
HTML创建表格
qq_51049931的博客
07-08 1万+
制作网页时，使用表格可以更清晰的排列数据，是网页制作中使用最多的形式之一。 一、创建并设置表格属性 1.表格的基本标记——table、tr、td 表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记） 行：表格中的水平间隔； 列：表格中的垂直间隔； 单元格：表格中行与列相交所产生的区域。 基本语法： ...
HTML之如何创建表格？
热门推荐
花果山的和尚的博客
06-19 2万+
表格由 &lt;table&gt; 标签来定义。每个表格均有若干行（由 &lt;tr&gt; 标签定义），每行被分割为若干单元格（由 &lt;td&gt; 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。border属性指定有无边框，不写border属性或者赋值为0，创建的表格都将没有边框;赋值的大小...
JS UI库DHTMLX Suite v8.4全新发布——图表、网格组件等API全面升级
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
08-13 601
本文将为大家介绍强大JavaScript UI库DHTMLX Suite v8.4新功能，欢迎下载新版体验！
3：html（CSS)：基础语法3
最新发布
2301_76578848的博客
08-17 300
在这篇文章中，介绍了网页布局与id的内容，从而将网页更加美观，越来越贴近大家平时看到的网页了。当然现在的网页离成功还是有很大的路要走。
html+css 实现hover 边框彩色按钮
宝码香车的博客
08-14 829
这是一个，hover后按钮边框变彩色的效果。附具体代码，深入理解，彻底掌握！可以一键复制，查看效果。
salesforce rich text 字段支持html中内嵌JavaScript吗
Debug yourself!
08-13 416
如果你尝试在 Salesforce 的富文本字段中插入 JavaScript，代码会被过滤掉。推荐的方式是在适当的地方使用 Salesforce 支持的 JavaScript 功能，比如自定义按钮、Visualforce 页面或 Lightning 组件，而不是在富文本字段中直接嵌入脚本代码。
Javaweb学习之HTML（二）
2301_80841939的博客
08-17 242
TML 响应式 Web 设计（Responsive Web Design, RWD）是一种网页设计方法，它使得网站能够根据不同的访问设备（如桌面电脑、平板电脑、智能手机等）的屏幕尺寸和分辨率来自动调整布局、图片大小、字体等，从而提供最佳的浏览体验。但是，请注意，在HTML文档中直接使用Unicode编码字符时，需要确保文档的编码（如UTF-8）能够支持这些字符。HTML5引入了一些新的字符实体，主要用于表示一些数学符号、技术符号以及特殊字符等，但这些新的字符实体在日常的HTML编码中并不常用。
如何在HTML中创建表格？
11-09
HTML中创建表格需要使用`<table>`标签，其中可以包含`<tr>`标签表示表格的行，`<th>`标签表示表格的表头，`<td>`标签表示表格的单元格。可以使用`border`属性设置表格的边框，使用`cellpadding`属性设置单元格的边距。如果单元格中没有内容，可以使用` `占位符来保持单元格完整。下面是一个简单的HTML表格的例子： ```html <table border="1" cellpadding="10"> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>18</td> <td>男</td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> </tr> </table> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值