DX推進をサポートする情報サイト

 お問い合わせ 
プロフィール

初心者向けWebサイト、データベース入門

TOP >初心者向けWebサイト、データベース入門 >2. 1 HTMLで簡単な表作成

HTMLで簡単な表作成

2023-04-02 (更新日:2023-04-02)

1)HTMLで一覧表の表示の枠組みを作成

 ブログラムはさくらエディターで記述します。
ファイルを保存するとき右記のアラートが出ますが、
そのまま「はい」をクリックください。

下記のプログラム記述(コピーOK)しファイルを作成し配置してください。
ファイル名:customerlist.html → このファイルを表示させる

配置先:c:\xampp\htdocs\ ※この配置先はドキュメントルートと呼ばれこのフォルダー以降
 のファイルにブラウザよりアクセスができます。
               配置先URL:http://localhost/customerlist.html

								<!DOCTYPE html>
								<html lang="ja">
								
								<head>
									<meta charset="utf-8">
									<link rel="stylesheet" href="/style.css" type="text/css">
									<title>得意先一覧表</title>
								</head>
								
								<body>
									得意先一覧表<br>
									<table bgcolor="#a9a9a9" cellspacing="1px" style="font-size:12px;" >
										<tr bgcolor="#D3D3D3" style="height:24px;" align="center">
										<td width="90px">得意先コード</td>
										<td width="200px">得意先名</td>
										<td width="70px">郵便番号</td>
										<td width="200px">住所1</td>
										<td width="200px">住所2</td>
										</tr>
										<tr bgcolor="white" style="height:24px;" align="left">
											<td align="center">10001</td>
											<td>ABC株式会社</td>
											<td align="center">220-0001</td>
											<td>神奈川県横浜市中区〇〇</td>
											<td>横浜ビル10階</td>
										</tr>
									</table>
								</body>

								</html>
							

HTML(エッチテーエムエル)は、ブラウザで表示させるための言語です。
様々なタグで囲んで(<***> ~ )記載します。

<!DOCTYPE html....HTML文である宣誓(HTMNLで記載してます。)
<html> ~ </html>HTMLで記述範囲を指定
lang="ja" は日本語でのHTML文の指定
<head> ~ </head>サイトの情報(タイトルや文字コード、スタイルシート)を記述
<meta>charset="utf-8"で文字コードの指定
<link>スタイルシート記述ファイルの配置先
 表示フォーマットの指定をするファイルの配置先を記載
<title> ~ </title>サイトのタイトル
 ブラウザ上部のタグにタイトルとして表示される。
<body> ~ </body>ブラウザで表示される本文
<table> ~ </table>一覧表全体の表示記述
 <tr> ~ </tr>一覧表の行の表示記述
 <td> ~ </td>一覧表のセルの表示記述
 </td>改行
  cellspacing一覧表のセルの間隔を指定
  bgcolor="#a9a9a9"背景色の指定 #a9a9a9は色コード ※HTML色で検索ください。
  style=*****これで文字色とかサイズ、フォント、幅、高さ等様々指定ができる
  align(アライン)配置方向を設定(左よせ、中央、右よせ)
  width=表や行、セルの幅指定
  style="height:***;"行の高さ指定
  px長さ高さの単位(ピクセル・粒)
  cellspacing一覧表のセルの間隔を指定
  bgcolor="#a9a9a9"背景色の指定 #a9a9a9は色コード ※HTML色で検索ください。
  style=*****これで文字色とかサイズ、フォント、幅、高さ等様々指定ができる
  align(アライン)配置方向を設定(左よせ、中央、右よせ)
  width=表や行、セルの幅指定
  style="height:***;"行の高さ指定
  px長さ高さの単位(ピクセル・粒)

 これらは上記サンプルのHTMLで資料しているタグです。他に様々タグ等があるのでgoogleでの検索や書籍での学習をお勧めします。
また、サンプルのcustomerlist.htmlを使って、色や長さを変えたり色々変更して記述を理解ください。


次はデータベースの基本操作を行います。