
1.テーブルの表示方法を設定する
table-layout : キーワード;
<キーワード>
auto : テーブルの列幅を自動レイアウトにす
る(デフォルト)
fixed : テーブルの列幅を固定する
テーブルは全体を読み込んでから、セル内容に合わせて各列の幅を決定するため表示されるまでに時間がかかることがあリます。
fixedで設定する事で、最初の一行目を読み込んだ時点で列の幅を固定して表示を開始するため、
表示が速くなることがあります。
(例)
{auto}
<TABLE border="1" width="80%"
style="table-layout : auto;">
<TBODY>
<TR><TD>テスト点数</TD><TD>国語</TD><TD>数学</TD><TD>英語</TD></TR>
<TR><TD>佐藤くん</TD><TD>78</TD><TD>85</TD><TD>69</TD></TR>
<TR><TD>田中さん</TD><TD>91</TD><TD>70</TD><TD>77</TD></TR>
</TBODY>
</TABLE>
<BR>
{fixed}
<TABLE border="1" width="80%"
style="table-layout : fixed;">
<TBODY>
<TR><TD>テスト点数</TD><TD>国語</TD><TD>数学</TD><TD>英語</TD></TR>
<TR><TD>佐藤くん</TD><TD>78</TD><TD>85</TD><TD>69</TD></TR>
<TR><TD>田中さん</TD><TD>91</TD><TD>70</TD><TD>77</TD></TR>
</TBODY>
</TABLE>
(結果)
{auto}
テスト点数 | 国語 | 数学 | 英語 |
佐藤くん | 78 | 85 | 69 |
田中さん | 91 | 70 | 77 |
{fixed}
テスト点数 | 国語 | 数学 | 英語 |
佐藤くん | 78 | 85 | 69 |
田中さん | 91 | 70 | 77 |
2.セルの枠線の表示を変更する。
border-collapse : キーワード;
<キーワード>
separate : 隣接するセルのボーダーを間隔をあけて表示(デフォルト)
collapse : 隣接するセルのボーダーを重ねて表示
(例)
{separate}
<TABLE border="1" style="border-collapse:
separate;">
<TBODY>
<TR><TD>テスト点数</TD><TD>国語</TD><TD>数学</TD><TD>英語</TD></TR>
<TR><TD>佐藤くん</TD><TD>78</TD><TD>85</TD><TD>69</TD></TR>
<TR><TD>田中さん</TD><TD>91</TD><TD>70</TD><TD>77</TD></TR>
</TBODY>
</TABLE>
<BR>
{collapse}
<TABLE border="1" style="border-collapse:
collapse;">
<TBODY>
<TR><TD>テスト点数</TD><TD>国語</TD><TD>数学</TD><TD>英語</TD></TR>
<TR><TD>佐藤くん</TD><TD>78</TD><TD>85</TD><TD>69</TD></TR>
<TR><TD>田中さん</TD><TD>91</TD><TD>70</TD><TD>77</TD></TR>
</TBODY>
</TABLE>
(結果)
{separate}
テスト点数 | 国語 | 数学 | 英語 |
佐藤くん | 78 | 85 | 69 |
田中さん | 91 | 70 | 77 |
{collapse}
テスト点数 | 国語 | 数学 | 英語 |
佐藤くん | 78 | 85 | 69 |
田中さん | 91 | 70 | 77 |
初心者による初心者のためのCSS講座_TOPに戻る