ホームページ > 記事 > ウェブフロントエンド > HTMLのtableタグについて詳しく解説
HTMLのtableタグについて詳しく解説
- 迷茫オリジナル
- 2017-03-25 11:31:461783ブラウズ
免責事項 1: ここにあるテキストは私自身の csdn アカウントからコピーされたものであり、私自身の学習と要約の結果であるため、この作品を尊重してください。 2: この記事を転載する場合は、出典を明記してください。 ３：何か間違っている点がありましたら、ご指摘ください。
前回の記事では、リンクタグ、イメージタグ、HTMLフレームワークなど、httpの基本的なタグを中心に説明しました。次回は、テーブルタグ、リストタグ、フォームタグを中心に詳しく説明していきますタグ。
f5d188ed2c074f8b944552db028f98a1f16b1740fad44fb09bfe928bcc527e08 テーブルラベル
注:b6c5a531a458a2e790c1fd6421739d1c b90dd5946f0946207856a8a37f441edf ラベルは列を表すために使用されます b4d429308760b6c2d20d6300079ed38e ラベルはテーブルのタイトルを表すために使用されます。 ; b90dd5946f0946207856a8a37f441edf 内部のコンテンツは自動的に拡大され、太字になります
border 表の境界線の幅をピクセル単位で設定しますwidth 表の幅をピクセル単位で設定しますheight 表の高さをピクセル単位で設定しますcellspacing Distance のセル間の間隔は、表の境界線間の間隔を指しますcellpadding テキストとセルの境界線の間の距離を設定しますbgcolor 表の背景色を設定しますalign 中央、左などの配置を設定するために使用されます、右63bd76834ec05ac1f4c0ebbeaafb0994 テーブル ヘッダー名 37eb775bb5a9e6f3d094e96a76117fe8 はテーブルのヘッダーを表すために使用されます (2) セルの結合について注意
: テーブルの各セルにいるとき セルに異なるコンテンツを入力すると、コンテンツは異なる長さで変化します。各セルのサイズを同じにするには、次の 2 つの方法があります。テーブルの合計の高さは 400 で、4 行を設定し、各セルに属性 hight=100 を各 a34de1251f0d9fe1e645927f19a896e8 タグに追加することは均等分布と同等であり、同じ幅に対して同じ方法が使用されます。 2: CSS スタイルの設定と tr と td のサイズを固定する最初の方法よりも簡単になります2: リストラベル
<!DOCTYPE html>
<html>
<head>
<!-- 原创作者：蜗牛 -->
<title>table标签</title>
</head>
<body>
<table border="1" width="360" height="240"
cellspacing="1" cellpadding="1"
align="center" bgcolor="red"> <!--这里的center表示该表格在页面的中间位置-->
<!--这里的背景色标签是bgcolor-->
<caption><h2>我的好朋友</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr align="center"> <!--这里的center表示的是表格里面的字体居中-->
<td>小红</td>
<td>女</td>
<td>20</td>
<td>跳舞</td>
</tr>
<tr align="center">
<td>小舵</td>
<td>女</td>
<td>24</td>
<td>唱歌</td>
</tr>
</table>
</body>
</html>実行結果は以下の通りです:
3: フォーム
ff9c23ada1bcecdd1a0fb5d5a0f18437f5a47148e367a6035fd7a2faa965022e フォームタグ
<!DOCTYPE html>
<html>
<head>
<title>table中合并单元格</title>
</head>
<body>
<table border="1" width="300" height="200"
align="center" background="first.jpg" > <!--background代表的是背景图片，bgcolor代表背景色完全不一样-->
<tr align="center" width="100" >
<td>1</td>
<td colspan="2">占两列</td> <!--当colspan="2"表示在同一行中，两列并一列，那么在它下面少写一个<td></td>标签-->
<!-- 删除掉此<td></td> -->
<td>2</td>
</tr>
<tr align="center" width="100">
<td rowspan="2">占两行</td> <!--当 rowspan="2"表示在同一列中 两行并一行，那么在同一列中删掉一个<td></td>标签-->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr align="center" width="100" >
<!-- 删除掉此<td></td> -->
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
レンダリングは次のとおりです:
以上がHTMLのtableタグについて詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。