ホームページ > 記事 > ウェブフロントエンド > 【HTML】テーブルマーク_html/css_WEB-ITnose

【HTML】テーブルマーク_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-24 11:45:071662ブラウズ

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

1. 表格的定义：f5d188ed2c074f8b944552db028f98a1f16b1740fad44fb09bfe928bcc527e08

1）在需要使用表格的地方插入成对的f5d188ed2c074f8b944552db028f98a1f16b1740fad44fb09bfe928bcc527e08标记，就可以完成表格的插入。定义表格常用的标记有

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

实例：

<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）划分结构表格

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

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

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.表格行与单元格的属性

在表格中，通过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	设置单元格中内容与边框之间的间距

小结：

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS_html/css_WEB-ITnose によって作成された境界線コーナー効果次の記事：CSS_html/css_WEB-ITnose によって作成された境界線コーナー効果

続きを見る

【HTML】テーブルマーク_html/css_WEB-ITnose

関連記事