Tableダイヤフラムdivのドレスアップ

 Webフロントエンド1

学籍番号

名称

性別

年齢

01

チャン・サン

男性

20

02

李斯

女性

21

総人数

60

テーブルの構成要素。

    タイトル テーブルヘッダー メインボディ テーブルテール

Table テーブルを定義する

#include<stdio.h>
#include<stdlib.h>
#include<math.h>
int main(int argc,char *argv[])
{
    // Somewhere the math function is used
}  

Caption テーブルのタイトルを定義する。

gcc -o gop12 GOP12.c

Theadはテーブルヘッダのセクションを定義します。

/tmp/ccGjWwZ6.o: In function `main':
GOP12.c:(.text+0x346): undefined reference to `ceil'
GOP12.c:(.text+0x3d4): undefined reference to `ceil'
GOP12.c:(.text+0x555): undefined reference to `ceil'
GOP12.c:(.text+0x617): undefined reference to `ceil'
GOP12.c:(.text+0x6d9): undefined reference to `ceil'
/tmp/ccGjWwZ6.o:GOP12.c:(.text+0x991): more undefined references to `ceil' follow
collect2: ld returned 1 exit status

Tbody フォームの本体を定義します。

gcc -lm -o gop12 GOP12.c

Tfootはテーブルの終端を定義し、一般的にサマリー情報を表示するために使用されます。

<tfoot>
					<tr>
						<td colspan="3">Total number of people:</td>
						<td>60</td>
					</tr>
				</tfoot>

Tr 行を定義する

<tr>
					<th>School number</th>
					<th>Name</th>
					<th>Gender</th>
					<th>Age</th>
				</tr>

Th td データ項目（セル）を定義する th 一般的にテーブルヘッダーで使用され、太字のスタイルで表示される

                                             Td 一般的にボディ部で使用され、太字スタイルなし

<tr>
					<td>01</td>
					<td>Zhang San</td>
					<td>M</td>
					<td>20</td>
				</tr>

Td rowspanとcolspanはそれぞれ、セル全体の行数とセル全体の列数を定義します。

<td colspan="3">Total number of people:</td>

Cellspacing テーブルの間隔を定義します。

セルパディング 表の余白を定義します。

<table border="1" cellspacing="0" cellpadding="10">

Divは分割を定義する

<div style="width: 200px;height: 200px;background-color:skyblue";>

特徴：改行で表示する ブロックレベルタグ

ブロックレベルタグとインラインタグの違い。

ブロックレベルタグは行を埋め尽くす。インラインタグは左から右へ順番に並べられる

ブロックレベルタグ：h1-h6 p ul ol li div table dl form

インラインタグ：span a br lable I em

ブロックレベル要素の特徴：display:block

• 各ブロックは新しい行で始まり、それに続く要素は別の行で始まる
• 要素の幅、高さ、行の高さ、内側と外側の余白のすべてが設定可能です
• 要素の幅を設定しない場合、高さを設定しない限り、その親コンテナの100%になる

インライン要素の特徴：display: inline

• といった要素が1行になります
• 要素の幅、高さ、行の高さ、内側と外側の余白を設定することができない
• 要素の幅は、その要素が含むテキストや画像の幅であり、変更することはできない

インラインブロック要素の特徴：display: inline-block

• といった要素が1行になります
• 幅、高さ、行の高さ、内側と外側の余白を設定可能

概要

Tableとdivの導入と使い方の紹介は以上です。Tableとdivの導入と使い方については、BinaryDevelopの過去記事を検索するか、以下の記事を引き続き閲覧してください。