-1

サムネイル、記事名などを含む製品のリストがあるこのWebサイトがあります。一見、基本的なテーブルのように見えます。しかし、記事名とステータスがポップアップします。col– と rowspan でこのマークアップを作成するのは、ただ汚く感じます。

そこで、すべての li に dl を、dt を display:none として ul を作成することを考えていました。もっとセマンティックに感じますが、どうすればヘッドをフォーマットできますか?

#################################################### #####
# 写真 価格 年 燃料タイプ #
#################################################### #####
# #### #
# #### 記事名 | 状態 ＃
# #### $2000 2007 LPG #
#################################################### #####
# #### #
# #### 記事名 | 状態 ＃
# #### $2000 2007 LPG #
#################################################### #####
# #### #
# #### 記事名 | 状態 ＃
# #### $2000 2007 LPG #
#################################################### #####
4

2 に答える 2

2

恐るべしテーブル。dt が display:none である dl/dt/dd を持つ方法は考えられません。何か意味のある結果になる可能性があります。

私はこれらの行に沿って何かを試してみます:(スタイリングは重要ではありません)

<style>
  table { border:4px inset black; }
  td, th  {border:1px solid silver; padding:3px 20px }
  img { height: 100px; width: 100px; }
</style>
<table>
   <tr>
      <th rowspan="2">FOTO</th>
      <th id="articleName" colspan=2>ARTICLENAME</th>
      <th id="status">STATUS</th>
      <th rowspan="2">FUELTYPE</th>
   </tr>
   <tr>
      <th id="price">PRICE</th>
      <th id="year" colspan=2>YEAR</th>
   </tr>
   <tr>
      <td rowspan="2"><img src="example.gif" /></td>
      <td colspan="2" headers="articleName">Ford</td>
      <td headers="status">Clean</td>
      <td rowspan="2">LPG</td>
   </tr>
   <tr>
      <td headers="price">$2000</td>
      <td colspan="2" headers="year">2007</td>
   </tr>
   <tr>
      <td rowspan="2"><img src="example.gif" /></td>
      <td colspan="2" headers="articleName">Honda</td>
      <td headers="status">Clean</td>
      <td rowspan="2">LPG</td>
   </tr>
   <tr>
      <td headers="price">$2000</td>
      <td colspan="2" headers="year">2007</td>
   </tr>
   <tr>
      <td rowspan="2"><img src="example.gif" /></td>
      <td colspan="2" headers="articleName">Toyota</td>
      <td headers="status">Clean</td>
      <td rowspan="2">LPG</td>
   </tr>
   <tr>
      <td headers="price">$2000</td>
      <td colspan="2" headers="year">2007</td>
   </tr>
</table>
于 2011-03-28T21:06:10.967 に答える
2

私にはテーブルのように見えるので、なぜテーブルを使わないのですか? おそらくいくつかの dl/ul/... 怪物を作成して、テーブルのシミュレーションを不十分にすることもできますが、手動ですべてのサイズを変更する必要があり、フローティングとサイズが複数のブラウザーで適切に機能するように正気を失う必要があります。

HTML にはテーブル要素の完全なスイートがあります。表形式のデータがあります。表形式のデータをテーブルに入れることは、セマンティック マークのように思えます。

于 2011-03-28T20:49:48.267 に答える