【HTML】テーブルマーク_html/css_WEB-ITnose-htmlチュートリアル-php.cn

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

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. テーブル属性

Web ページのデザインでは、多くの場合、Web ページ内のテーブル

の書式設定を行う必要があります。これらの設定は、テーブルマーク属性を設定することで完了します。

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

属性名

説明

幅

テーブルの幅

ボーダー

ボーダーの太さ

フレーム (8タイプの属性値）

下の境界線を表示上下の境界線を表示左枠を表示右の境界線を表示左と右の境界線を表示rules( 5 つの属性値)

	hsides
	l hs
	rhs
	vsides

すべての内枠を表示	なし
内部境界線を表示しない	グループ
行と列の境界線を表示する	cols
列の境界線のみを表示	行

のみ線の境界線を表示

实例：

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

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

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

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