【HTML】表格标记_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

【HTML】表格标记_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:45 AM

设计网页时经常会用到表格来组织页面信息，它能将网页划分成任意多个矩形区域，每个区域可包含导航、文字、图像、动画等信息，设计者可将任意的网页元素放入其中。

1. 表格的定义：

1）在需要使用表格的地方插入成对的

标记，就可以完成表格的插入。定义表格常用的标记有

标记的属性来设置表格中某一行的属性，用

标签

说明


表格标记，用于插入表格

行标记，用于插入行
		列标记，用于插入列
		表头标记，用于设置表头信息

表格标题，设置标题

实例：

<html><head>	<title>表格的定义</title></head><body>	<table border="1">		<caption>计算机学习</caption>		<tr>			<th>CS</th>			<th>数据库</th>			<th>BS</th>		</tr>		<tr>			<td>软件工程</td>			<td>SQL Server</td>			<td>html</td>		</tr>		<tr>			<td>设计模式</td>			<td>mySql</td>			<td>JavaScript</td>		</tr>	</table></body></html>

效果：

2）划分结构表格

划分结构表格是指将一个表格分成三个部分，分别使用三个标记

标签	说明

定义一组表头行

为表格添加一个标注

定义表格的主体部分

2. 表格属性

在网页的设计中常常需要对网页中的表格

做一些格式上的设置，这些设置是通过对表格标记属性的设置完成的。

属性名称

说明

width

表格的宽度

border

边框粗细

frame（8种属性值）

设置表格的边框样式

属性值	说明
void	不显示边框
border	显示上下左右边框
above	显示上边框
below	显示下边框
hsides	显示上下边框
lhs	显示左边框
rhs	显示右边框
vsides	显示左右边框

rules（5种属性值）

设置表格内部边框的属性

属性值	说明
all	显示所有内部边框
none	不显示内部边框
groups	显示介于行列边框
cols	仅显示列边框
rows	仅显示行边框

实例：

<html><head>	<title>表格的属性</title></head><body>	<table width="500" frame="hsides" rules="rows">		<caption>计算机学习</caption>		<tr>			<th>CS</th>			<th>数据库</th>			<th>BS</th>		</tr>		<tr>			<td>设计模式</td>			<td>mySql</td>			<td>JavaScript</td>		</tr>		<tr>			<td>软件工程</td>			<td>SQL Server</td>			<td>html</td>		</tr>	</table></body></html>

效果：

3.表格行与单元格的属性

在表格中，通过

的属性设置表格单元格的属性。

属性名称

说明

align（3种属性值）

设置行内容的水平对齐方式

属性值	说明
left	左对齐
right	右对齐
center	居中对齐

valign（4种属性值）

设置行内容的垂直对齐方式

属性值	说明
top	顶端对齐
middle	居中对齐
bottom	底部对齐
baseline	基线

rowspan

设置跨行，即单元格的纵向合并

colspan

设置跨列，即单元格的横向合并

实例：

<html><head>	<title>表格行与单元格的属性</title></head><body>	<table width="500" frame="hsides" rules="all">		<caption>计算机学习</caption>		<tr>			<th>CS</th>			<th>数据库</th>			<th>BS</th>		</tr>		<tr>			<td rowspan="2" align="center">设计模式</td>			<td >mySql</td>			<td>JavaScript</td>		</tr>		<tr>			<td>SQL Server</td>			<td>html</td>		</tr>	</table></body></html>

效果：

4.多个表格的使用

表格可以嵌套使用以表示层次关系，在

标记插入表格后，可在间再插入

表示在单元格中插入表格；也可以多个同级表格同时使用，此时有两个常用的属性可方便表格的排版，美化布局。

cellspacing	设置单元格的间距
cellpadding	设置单元格中内容与边框之间的间距

小结：

表格是一种很简单的页面布局工具，它的应用使得网页简洁直观，且更便于阅读。熟练掌握主要的表格标记的相关属性，可以提高工作效率

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

See all articles