MB-Support

パソコン初心者のサポートページ

テーブルで枠組みを作る方法

 表を作成するtable(テーブル)ですが、これをホームページのデザインとして利用する事ができます。しかし、今ではデメリットが目立ち、あまり使われなくなりました。しかしながら、CSS の解釈が異なるブラウザーでも、テーブルを使うと同じ表示を維持する事ができます。


テーブルでホームページの枠組を作る サンプル1

ただの表と考えずに、テーブルでホームページの枠組みを作ってしまう。



HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <table border="1" width="200" height="200">
  <tr valign="top">
   <td width="50">リンク</td> 
   <td width="150">ページの題名</td>
  </tr>
 </table>
</body>
</html>

ブラウザ

サンプル1

・横と縦の値を大きくする。

<table border="1" width="800" height="800">

・表枠を透明にする。

<table border="0" width="800" height="800">

・セルに背景色を指定する。

<td bgcolor="カラーネーム・カラーコード">


テーブルでホームページの枠組を作る サンプル2

上記のサンプルにテーブルを 1 つ加える。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<table border="1" width="200" height="10">
  <tr><td>ホームページの題名</td></tr>
 </table>
 <table border="1" width="200" height="200">
  <tr valign="top">
   <td width="50">リンク</td> 
   <td width="150">内容</td>
  </tr>
 </table>
</body>
</html>

ブラウザ

サンプル2

・横と縦の値を大きくする。

<table border="1" width="800" height="800">

・表枠を透明にする。

<table border="0" width="800" height="800">

・セルに背景色を指定する。

<td bgcolor="カラーネーム・カラーコード">


テーブルでホームページの枠組を作る サンプル3

ブラウザの中央に配置する。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <center>
  <table border="1" width="200" height="10">
   <tr><td>ホームページの題名</td></tr>
  </table>
  <table border="1" width="200" height="200">
   <tr valign="top">
    <td width="50">リンク</td> 
    <td width="150">内容</td>
   </tr>
  </table>
 </center>
</body>
</html>

ブラウザ

サンプル3

・テーブル全体をセンタリングする。

<center>〜</center>

・ボディに背景色をつける。

<body bgcolor="カラーネーム・カラーコード">

・横と縦の値を大きくする。

<table border="1" width="800" height="800">

・表枠を透明にする。

<table border="0" width="800" height="800">

・セルに背景色を指定する。

<td bgcolor="カラーネーム・カラーコード">


テーブルでホームページの枠組を作る サンプル4

ブラウザの中央に配置する。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <center>
  <table border="1" width="200" height="100">
   <tr valign="top">
    <td>ホームページの題名</td>
   </tr>
  </table>
 </center>
</body>
</html>

ブラウザ

サンプル4




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項