１６．テーブルとスタイルシート
　　テーブルをホームページのデザイン（レイアウト）に使うのは、ごく普通になってきていますが、
　以下のような問題があります。
　１）日本語（全角文字）と英語（半角文字）の自動改行の違い。
　　　<html>
　　　<head>
　　　<title>テーブルの日本語（全角文字）と英語（半角文字）の自動改行の違い。</title>
　　　</head>
　　　 <body>　
　　　 <table border="1">
　　　 <tr>
　　　 <td>今日は、少し天気悪るそうですね。梅雨は、うっとしいですね。</td>
　　　 </tr>
　　　 <tr>
　　　 <td>012345678901234567890123456789</td>
　　　 </tr>
　　　 </table>
　　　 </body>
　　　 </html>
今日は、少し天気悪るそうですね。梅雨は、うっとしいですね。
012345678901234567890123456789
　　　ブラウザの横サイズを小さくしてみてください。日本語が自動改行して表の型崩れが発生します。
　　　日本語の自動改行をさせないためには、以下のような所に注意します。

　 ２）テーブルの幅（セルの幅）を固定にする。
　　　<html>
　　　<head>
　　　<title>テーブルの日本語（全角文字）と英語（半角文字）の自動改行の違い。</title>
　　　</head>
　　　 <body>　
　　　<table border="1" width="450">
　　　<tr>
　　　<td width="450">今日は、少し天気悪るそうですね。梅雨は、うっとしいですね。</td>
　　　</tr>
　　　<tr>
　　　<td>012345678901234567890123456789</td>
　　　</tr>
　　　</table>
　　　 </body>
　　　 </html>
今日は、少し天気悪るそうですね。梅雨は、うっとしいですね。
012345678901234567890123456789


　３）テーブルの幅（セルの幅）を固定せずにセルに自動改行禁止属性（nowrap）を書く。
　　　<html>
　　　<head>
　　　<title>テーブルの日本語（全角文字）と英語（半角文字）の自動改行の違い。</title>
　　　</head>
　　　 <body>　
　　　<table border="1">
　　　<tr>
　　　<td nowrap>今日は、少し天気悪るそうですね。梅雨は、うっとしいですね。</td>
　　　</tr>
　　　<tr>
　　　<td>012345678901234567890123456789</td>
　　　</tr>
　　　</table>
　　　 </body>
　　　 </html>
今日は、少し天気悪るそうですね。梅雨は、うっとしいですね。
012345678901234567890123456789

　 ４）文字サイズによる型崩れ。

さる公園たちのサルです。 天気もよくのどかな一日です。 仲よさそうな二匹ですね。ん～
文字サイズにより、文書が自動改行してしまう。
さる公園たちのサルです。 天気もよくのどかな一日です。 仲よさそうな二匹ですね。ん～
改行禁止すると、表の幅が 変わってしまう。（赤色の部分）
　　　 ブラウザ上でいろいろ文字サイズを変えてみてください。
　　　 表のかたく擦れが発生します。
　　　 テーブルを使ってホームページデザインをする場合は、以上のような問題が発生します。
　　　 これをスタイルシートを使って改善します。

　 ５）テーブル全体にスタイルシートを適用する。
　　　 ＜書式＞<table border="1" class="alltable" >
今日は、少し天気悪るそうですね KyouWaSukoshiTenkiWarusoudesune.
   

　６）テーブルに行単位でスタイルシートを適用する。
　　　＜書式＞<table border="1">
　　　　　　　　　<tr class="rowtable">
　　　　　　　　　<td .....
今日は、少し天気悪るそうですね。 KyouWaSukoshiTenkiWarusoudesune.
   

　７）セル単位にスタイルシートを適用する。
　　　＜書式＞<table border="1">
　　　　　　　　　<tr>
　　　　　　　　　<td class="tablesell1">今日は、少し天気悪るそうですね。</td>
　　　　　　　　　<td class="tablesell2">KyouWaSukoshiTenkiWarusoudesune.</td>
　　　　　　　　　 </tr>
　　　　　　　　　 <tr .......
今日は、少し天気悪るそうですね。 KyouWaSukoshiTenkiWarusoudesune.
   

　 ８）スタイルシートのボーダーをテーブルのボーダーの様にする。
　　　<html>
　　　<head>
　　　 <title>ボーダー枠を一括で指定する。</title>
　　　 <style type="text/css">
　　　 <!--
　　　　　.border1 {
　　　　　　　　　　　border: medium ridge #FF0000;
　　　　　}
　　　　　 .border2 {
　　　　　　　　　　　border-top-width: medium;
　　　　　　　　　　　border-right-width: medium;
　　　　　　　　　　　border-bottom-width: medium;
　　　　　　　　　　　border-top-style: ridge;
　　　　　　　　　　　border-right-style: ridge;
　　　　　　　　　　　border-bottom-style: ridge;
　　　　　　　　　　　border-top-color: #FF0000;
　　　　　　　　　　　border-right-color: #FF0000;
　　　　　　　　　　　border-bottom-color: #FF0000;
　　　　　}
　　　　　.border3 {
　　　　　　　　　　　border-right-width: medium;
　　　　　　　　　　　border-right-style: ridge;
　　　　　　　　　　　border-right-color: #FF0000;
　　　　　　　　　　　border-bottom-width: medium;
　　　　　　　　　　　border-left-width: medium;
　　　　　　　　　　　border-bottom-style: ridge;
　　　　　　　　　　　border-left-style: ridge;
　　　　　　　　　　　border-bottom-color: #FF0000;
　　　　　　　　　　　border-left-color: #FF0000;
　　　　　}
　　　　　.border4 {
　　　　　　　　　　　border-right-width: medium;
　　　　　　　　　　　border-bottom-width: medium;
　　　　　　　　　　　border-right-style: ridge;
　　　　　　　　　　　border-bottom-style: ridge;
　　　　　　　　　　　border-right-color: #FF0000;
　　　　　　　　　　　border-bottom-color: #FF0000;
　　　　　}
　　　　-->
　　　 </style>
　　　 </head>
　　　 <body>
　　　 <table width="562" border="1">
　　　 <tr>
　　　 <td width="274" height="21" class="border1">&nbsp;</td>
　　　 <td width="272" class="border2">&nbsp;</td>
　　　 </tr>
　　　 <tr>
　　　 <td class="border3">&nbsp;</td>
　　　 <td class="border4">&nbsp;</td>
　　　 </tr>
　　　 </table>
　　　 </body>
　　　 </html>
   
   

　上テーブルは、テーブルのボーダーが表示されているので表示しないようにする。　→　border="0"　にする。
　表示しないようにしても隙間があるので隙間をなくす。　→　 cellspacing="0"　を追加する。
　　　 <table width="562" border="0" cellspacing="0">
　　　 <tr>
　　　 <td width="274" height="21" class="border1">&nbsp;</td>
　　　 <td width="272" class="border2">&nbsp;</td>
　　　 </tr>
　　　 <tr>
　　　 <td class="border3">&nbsp;</td>
　　　 <td class="border4">&nbsp;</td>
　　　 </tr>
　　　 </table>

   
   


　＜課題１＞ ５）、６）、７）のスタイルシートをやって見なさい。（設定は、自由）
　＜課題２＞４）の欠点をスタイルシートを使って改善しなさい。
　＜課題３＞次のテーブルをスタイルシートを使ってデザインしなさい。（設定は、自由）
　　　　　　　テーブルは、２行２列の表になっている。
さる公園たちのサルです。
天気もよくのどかな一日です。

　＜課題４＞テーブル全体を左から５０ピクセルほど離れた所に配置しなさい。
さる公園たちのサルです。
天気もよくのどかな一日です。