リストの高さを揃えたい

質問

リスト2行を左右に並べて設置したいと思い、テーブルのセルの中にそれぞれ記述しました。
左のセルには5行、右のセルには4行あります。
右側が1行少ないことで、左右で高さが異なってしまいます。（図があります）
どうも、右側のリスト全体がセルの中央に配置されている感じがします。
左右で高さを揃えたいのですが、その方法を教えてください。

HTMLとCSSは以下のとおりです

（HTML）

<table>
<tr>
<td class="sample"><ul>
<li>ABC</li>
<li>DEF</li>
<li>GHI</li>
<li>JKL</li>
<li>MNO</li>
</ul>
</td>
<td class="sample"><ul>
<li>PQR</li>
<li>STU</li>
<li>VWX</li>
<li>YZA</li>
</ul>
</td>
</tr>
</table>

（CSS）

.sample{ text-align: left; valign: top; padding: 0px; border: none; }

回答No.1

hitomura · ベストアンサー

table なんていらん。

--------------- HTML ---------------
<ul>
<li>ABC</li>
<li>DEF</li>
<li>GHI</li>
<li>JKL</li>
<li>MNO</li>
</ul>
<ul>
<li>PQR</li>
<li>STU</li>
<li>VWX</li>
<li>YZA</li>
</ul>

--------------- CSS ---------------
ul { display:inline-block; vertical-align:top; }

お礼

ご回答ありがとうございます。
tableを使わないでうまくできました。

回答No.3

ORUKA1951

御存知のように
『単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )』
『ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』
　はしてはなりません。
★vertical-align は必要ありません。
★class名は、文書構造を補足するためでデザインのために書かない!!
　DIV,SPANに限らず、『id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ためのものです。
　たぶん何らかの階層をもつリストでしょうから・・
　<ul>
　　<li>
　　　<ul>
　　　　<li>ABC</li>
　　　　<li>DEF</li>
　　　　<li>GHI</li>
　　　　<li>JKL</li>
　　　　<li>MNO</li>
　　　</ul>
　　</li>
　　<li>
　　　<ul>
　　　　<li>PQR</li>
　　　　<li>STU</li>
　　　　<li>VWX</li>
　　　　<li>YZA</li>
　　　</ul>
　　</li>
　</ul>
とマークアップすべきではないですか??
　それを、ふたつのブロックにして並べたいのでは???

　HTMLには、率直に文書の意味的構造だけを記述して、スタイルシートで「リスト2行を左右に並べて設置したい」と考えれば良いです。そうすれば、スマホなどの狭いディスプレイなら縦に並べるとか、印刷時は整形しないで置くとか・・自在にできます。

お礼

ご回答ありがとうございます。
本来の使い方ではなく、ついつい便宜的なやり方で済ませてしまいます。
正しい使い方をしないといけませんね。

回答No.2

AsarKingChang

単純にスペルミスだと思う。。
.sample{ text-align: left; valign: top; padding: 0px; border: none; }

valign: top;
じゃなくて、
vertical-align: top;
じゃないですか？

valignはHTML側の書式なので、CSSじゃないと思います。

お礼

ご回答ありがとうございます。
そうなんですか？
あまりにも基本的なことを知りませんでした。