tableレイアウトをcssで軽くできませんか？

質問

tableタグを使用して、ごく普通の表を作成し、Web上に掲載しています。
しかし、とにかく情報量が多く、情報が増えるたびに明らかに重くなってきました。
今のうちに対策をと思い、何とかcssを使用しソースを軽くしようと思っています。

現在掲載中の表は下記のような、いたってシンプルなものです。

<table class="table1">
<tr>
<td class="midasi">日付</td>
<td class="midasi">対戦相手</td>
<td class="midasi">勝敗</td>
<td class="midasi">備考</td>
</tr>
<tr>
<td>1月1日</td>
<td>○○高校</td>
<td>勝ち</td>
<td>4分30秒　○×反則</td>
</tr>
<tr>
<td>1月2日</td>
<td>××高校</td>
<td>負け</td>
<td></td>
</tr>
。
。
～～～
以下続く
～～～
。
。
</table>

表である以上tableタグになってしまうのは仕方ないとは思うのですが、上手い具合にソースの量を減らせれば改善したいと思っています。
アドバイスの程、よろしくお願い致します。

回答No.5

ORUKA1951 · ベストアンサー

可能な限りHTMLはシンプルにすること。
たとえば、
<table class="table1">
<tr>
<td class="midasi">日付</td>
<td class="midasi">対戦相手</td>
<td class="midasi">勝敗</td>
<td class="midasi">備考</td>
</tr>
ではなくて、
<table class="table1">
<tr>
<ht>日付</td>
<th>対戦相手</td>
<th>勝敗</td>
<th>備考</td>
</tr>
として、CSSで指定すること。

CSSにてtable-layoutをfixedに指定して、一行目ですべての列のサイズを決定すること。
可能な限り、tableを小分けにすること。
画像にしたらデータ量は膨大になりますし、そもそもHTMLの基本理念に反します。
表は表としてマークアップすること!!(表でないものをレイアウトのために表のするのも×)
<< http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/styles.html#h-14.1

回答No.4

k0021

確かtableレイアウトを作成するとイアウトを作成後表示するようですので、cssでは、ソースの量が増すが順次表示しますので全て表の表示時間は増えますが検討してみては。

<div style="width:tableの幅指定;clear:both;">　trの指定ぶの置き換え指定
<div style="width:幅;float:left;text-align:center;border:solid black 1px;height:高さ;">日付</div>
<div style="width:幅;float:left;border-style:solid
solid solid none;border-color:black;border-width:1px;height:高さ;">日付</div>

指定済の枠線は、指定出来ませんので注意してください。
2行め以降は指定が異なりますが省略します

回答No.3

0wl

<td class="midasi">日付</td>
を
<th>日付</th>
とする。

<th> は、<td>番の見出しタグですわざわざクラスをつけなくてもすみます。

これだけではあまりかわらないのですが、憶測ですが、重くなると感じるのは、テーブルサイズが縦に長すぎるからではないでしょうか？きりのいいところで、いったん</table>し<table>を小分けしていくと表示が速くなり、体感的に（1ページ）分表示されるのが速くなるので、見る人にストレスをかんじさせなくなりますし、見出しが適度に入るきことにより見やすくなります。

根本的解決法ではありませんが、お試しください。

回答No.2

metametamu

widthを指定するだけでも結構軽くなりませんか？

table.table1{
table-layout:fixed;
width:800px;
}

補足

ご回答有難うございます。
すみません、記載忘れですがtable1にはwidth指定等が既にあるものとなっています。
またtdの方にも指定をしています。

回答No.1

taporu

cssにしたら逆に増えるでしょうね。
決まってしまったデータなら画像化してみてはいかがでしょうか。
もしくは複数のページに分裂しiframeをつかってページを表示させるとか。

補足

ご回答有難うございます。なるほど画像化という手がありましたか！
しかし一部データは変動する箇所もあるので、様子見で最終手段として使用しようかと思います。
ユーザー要望で、複数のページに分裂が不可なので、なんとか現状で軽くしたいと思っています。