Home > Article > Web Front-end > 【HTML】Table mark_html/css_WEB-ITnose

【HTML】Table mark_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 11:45:071662browse

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

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

Table title, set title

标签	说明
f5d188ed2c074f8b944552db028f98a1	表格标记，用于插入表格
a34de1251f0d9fe1e645927f19a896e8	行标记，用于插入行
b6c5a531a458a2e790c1fd6421739d1c	列标记，用于插入列
b4d429308760b6c2d20d6300079ed38e	表头标记，用于设置表头信息
63bd76834ec05ac1f4c0ebbeaafb0994	表格标题，设置标题

tags

f5d188ed2c074f8b944552db028f98a1

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>

a34de1251f0d9fe1e645927f19a896e8

Row tag, used to insert rows

Column tag, used to insert columns

b4d429308760b6c2d20d6300079ed38e

标签	说明
ae20bdd317918ca68efdc799512a9b397943277d65306330563feb42dc8c705a	定义一组表头行
06669983c3badb677f993a8c29d18845d93f946a39a259de3097f230ac6e3edf	为表格添加一个标注
92cee25da80fac49f6fb6eec5fd2c22aca745a59da05f784b8811374296574e1	定义表格的主体部分

td>

Header tag, used to set header information

63bd76834ec05ac1f4c0ebbeaafb0994

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

Tags >
ae20bdd317918ca68efdc799512a9b397943277d65306330563feb42dc8c705a	Define a set of header rows
06669983c3badb677f993a8c29d18845d93f946a39a259de3097f230ac6e3edf	Add a label to the table
92cee25da80fac49f6fb6eec5fd2c22aca745a59da05f784b8811374296574e1

2. Table attributes

In the design of web pages, it is often necessary to make some formatting settings for the table f5d188ed2c074f8b944552db028f98a1 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>

效果：

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

在表格中，通过a34de1251f0d9fe1e645927f19a896e8标记的属性来设置表格中某一行的属性，用b6c5a531a458a2e790c1fd6421739d1c的属性设置表格单元格的属性。

属性名称

说明

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.多个表格的使用

表格可以嵌套使用以表示层次关系，在f5d188ed2c074f8b944552db028f98a1标记插入表格后，可在b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf间再插入f5d188ed2c074f8b944552db028f98a1表示在单元格中插入表格；也可以多个同级表格同时使用，此时有两个常用的属性可方便表格的排版，美化布局。

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

小结：

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

Statement：

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

Previous article：Border corner effect created by CSS_html/css_WEB-ITnoseNext article：Border corner effect created by CSS_html/css_WEB-ITnose

See more

【HTML】Table mark_html/css_WEB-ITnose

Related articles