【HTML】Table mark_html/css_WEB-ITnose-HTML Tutorial-php.cn

When designing web pages, tables are often used to organize page information. It can divide the web page into any number of rectangular areas. Each area can contain navigation, text, images, animations and other information. The designer can Place any web element into it.

1. Definition of table:

1) Insert pairs of

tags where tables need to be used, This will complete the insertion of the table. Commonly used tags for defining tables are

标签

说明


表格标记，用于插入表格

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

表格标题，设置标题

tags

Table tag, used to insert tables

<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>

Copy after login

Row tag, used to insert rows

Column tag, used to insert columns

标签	说明

定义一组表头行

为表格添加一个标注

定义表格的主体部分

<🎜>Header tag, used to set header information<🎜>

<🎜>

<🎜> < td> <🎜>Table title, set title <🎜> <🎜> <🎜>Example: <🎜> <🎜> <🎜>Effect: <🎜> <🎜> <🎜> <🎜>2) Divide the structure table <🎜> <🎜> Dividing the structure table means dividing a table into three parts, using three tags respectively <🎜> <🎜> <🎜> <🎜> td> <🎜> < td> <🎜>Define the main part of the table<🎜>

<🎜> Tags >
<🎜>
<🎜>Define a set of header rows<🎜>
<🎜>
<🎜>Add a label to the table<🎜>
<🎜>

2. Table attributes

In the design of web pages, it is often necessary to make some formatting settings for the table

in the web page. These settings are completed by setting the table tag attributes. of.

Width of the table

属性名称

说明

width

表格的宽度

border

边框粗细

frame（8种属性值）

设置表格的边框样式

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

Attribute name

Description

width

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

<🎜> <🎜> <🎜> <🎜>border<🎜> <🎜> <🎜> <🎜>Border thickness <🎜> <🎜> <🎜> <🎜> <🎜> <🎜>frame (8 attribute values) <🎜> <🎜> <🎜> <🎜>Set the border style of the table<🎜> <🎜 > <🎜> <🎜>Attribute value 🎜> <🎜> <🎜> <🎜>void<🎜> <🎜> <🎜> <🎜>Do not show borders<🎜> <🎜> <🎜> <🎜> <🎜> <🎜>border<🎜> <🎜> <🎜> <🎜>Show top, bottom, left and right borders<🎜> <🎜> <🎜> <🎜> <🎜> <🎜>above<🎜> <🎜> <🎜> <🎜>Show top border<🎜> <🎜> <🎜> <🎜> <🎜> <🎜>below<🎜> <🎜> <🎜> <🎜>Show bottom border<🎜> <🎜> <🎜> <🎜> <🎜> <🎜>hsides<🎜> <🎜> <🎜> <🎜>Show top and bottom borders<🎜> <🎜> < 🎜> <🎜> <🎜> <🎜>lhs<🎜> <🎜> <🎜> <🎜>Show left border<🎜> <🎜> <🎜> <🎜> <🎜> <🎜>rhs<🎜> < 🎜> <🎜> <🎜>Show right border<🎜> <🎜> <🎜> <🎜> <🎜> <🎜>vsides<🎜> <🎜> <🎜> <🎜>Show left and right border<🎜> <🎜 > <🎜> <🎜> <🎜><🎜> <🎜> <🎜> <🎜> <🎜> <🎜>rules (5 attribute values) <🎜> <🎜> <🎜>Set the inside of the table Border attributes<🎜>

<🎜> <🎜> <🎜>Attribute value ; <🎜> <🎜> <🎜> <🎜> <🎜> <🎜 >all<🎜> <🎜> <🎜> <🎜>Show all inner borders<🎜> <🎜> <🎜> <🎜> <🎜> <🎜>none<🎜> <🎜> <🎜> <🎜>No Show internal borders <🎜> <🎜> <🎜> <🎜> <🎜> <🎜>groups<🎜> <🎜> <🎜> <🎜>Show between row and column borders<🎜> <🎜> <🎜> <🎜 > <🎜> <🎜>cols<🎜> <🎜> <🎜> <🎜>Show column borders only<🎜> <🎜> <🎜> <🎜> <🎜> <🎜>rows<🎜> <🎜> < 🎜> <🎜> Show only row borders <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜> <🎜>

实例：

<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>

Copy after login

效果：

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>

Copy after login

效果：

4.多个表格的使用

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

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

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

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

小结：

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

Related labels：

【HTML】表格标记

source：php.cn

Previous article：Border corner effect created by CSS_html/css_WEB-ITnose Next article：How to implement root controller jump in UIWindow without using proxy (implementation of page jump)_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn