0

私は自分のウェブサイトにこのテーブルを持っていて、代わりにdivを使用するように切り替えたいと思っていますが、まだHTMLの研究に取り組んでおり、その方法がわかりません。私はtheme.cssというcssを持っていますが、これを機能させるために何かが入っていることを知っています。

<table>
 <tr>
   <td>
     <table>
       <tr>
         <td class="cellWidth">
             <img src="4-cute-cats.jpg" class="centerImage" width="300" height="300" />
             <p class="centerText">They hunt in packs.</p>
         </td>
         <td>

             <img src="cat_sniping.jpg" class="centerImage" width="256" height="192" />
             <p class="centerText">Sniper Cat</p></a>
         </td>
         <td class="cellWidth">
             <img src="LOL1.jpg" class="centerImage" width="300" height="298" />
             <p class="centerText">Sneaking Cat</p>
         </td>
         <td class="cellWidth">
             <img src="hammercat.jpg" class="centerImage" width="300" height="163" />
             <p class="centerText">80s Cat</p>
         </td>
       </tr>
       <tr>
         <td class="cellWidth">
             <img src="kittytrap.jpg" class="centerImage" width="200" height=492 />
             <p class="centerText">It's a trap!</p>
         </td>
         <td class="cellWidth">
             <img src="chop-cats.jpg" class="centerImage" width="300" height="140" />
             <p class="centerText">They can strip a car to the frame in under 2:00 minutes.</p>
         </td>
         <td class="cellWidth">
             <img src="smartkat.jpg" class="centerImage" width="200" height="338" />
             <p class="centerText">Intelligent cat.</p></a>
         </td>
         <td class="cellWidth">
             <img src="narniacat.jpg" class="centerImage" width="200" height="337" />
             <p class="centerText">Once a cat of Narnia always a cat of Narnia.</p>
         </td>
       </tr>
       <tr>
         <td class="cellWidth">
             <img src="lolcats3.jpg" class="centerImage" width="300" height="108" />
             <p class="centerText">Tired cat.</p>
         </td>
         <td class="cellWidth">
             <img src="lol_cats_1.jpg" class="centerImage" width="300" height="142" />
             <p class="centerText">Gollum Cat.</p>
         </td>
         <td class="cellWidth">
             <img src="Magical-Kitty.png" class="centerImage" width="300" height="180" />
             <p class="centerText">Super Cat.</p>
         </td>
         <td class="cellWidth">
             <img src="sad-kitty.jpg" class="centerImage" width="300" height="188" />
             <p class="centerText">Sad Kitty.</p>
         </td>
       </tr>
       <tr>
         <td class="cellWidth">
             <img src="cat-in-your-wallpaper.jpg" class="centerImage" width="300" height="200" />
             <p class="centerText">Wallpaper cat.
         </td>
         <td class="cellWidth">
             <img src="thinking-cat.jpg" class="centerImage" width="300" height="475" />
             <p class="centerText">Thinking cat.</p>
         </td>
         <td class="cellWidth">
             <img src="http://3.bp.blogspot.com/_znuneBeHigk/TSOOr5DuoQI/AAAAAAAABFY/-Rpe8S1uRo8/s1600/000.jpg&w=823&h=618&ei=_A4VUfP7L4Gy2QXJ-oHIDQ&zoom=1&ved=1t:3588,r:79,s:0,i:354&iact=rc&dur=2621&sig=108293906633680688065&page=3&tbnh=172&tbnw=231&start=67&ndsp=38&tx=64&ty=72" class="centerImage" width="300" height="225" />
             <p class="centerText">Gamer Kitty.</p>
         </td>
         <td class="cellWidth">
             <img src="http://www.dumpaday.com/wp-content/uploads/2013/01/funny-lol-cats-playing-with-toilet-paper1.jpg" class="centerImage" width="300" height="504" />
             <p class="centerText">Couch cat.</p>
         </td>
        </tr>
     </table>
   </td>
 </tr>
 <tr>
    <td align="center">
        <a href="morekitties.html">More Kitties</a>
    </td>
 </tr>
</table>
4

3 に答える 3

0

ブートストラップのようなフレームワークの使用を検討してください。CSSの基本セットを使用できるため、移行が少し簡単になります。

上記のhtmlはそれほど間違っていません。経験則では、ページレイアウトにテーブルを使用しないでください（外側のテーブルのように）が、表形式のデータに使用しても問題ありません。（データのリストのように）

ブートストラップフレームワークを使用します。

次のように簡単に変更できます。

<div class="container"> <--- Would be in your base template

<div class="row">

 <div class="span8">
     <table>
      ... Your tabular data
     </table>
 </div>
 <div class="span4">
        <a href="morekitties.html">More Kitties</a>
 </div>

</div>
于 2013-02-14T21:06:36.283 に答える
0

したがって、分解すると、HTMLコードには互いにネストされた2つのテーブルが含まれます。

<table>
    <tr>
        <td>
            <table> ... </table>
        </td>
    </tr>
    <tr>
        <td>
            ...
        </td>
    </tr>
</table>

これはレイアウトを制御しているように見え、内側のテーブルが上に表示され、下に「その他の子猫」リンクが表示されていることを確認します。

これは完全に削除できます。

<table> <!-- inner table --> </table>
<p class="centered"><a href="...">More Kitties</a></p>

cssの使用：

.centered {
    text-align: center; 
}

その内側のテーブル（猫の写真が入っているテーブル）は実際には画像データなので、テーブルのままにしておくことをお勧めします。（デモ）

本当に内部テーブルをsに変換したい場合<div>は、次のことをお勧めします。

  1. すべてのセル（<td>）を取得し、それをに変換します<div>
  2. <div>それぞれをでスタイル設定しdisplay:inline-block;ます。これにより、それらは互いに隣り合って表示されますが（インライン）、明示的なサイズ設定（ブロック）が維持されます。

例としてこのデモを参照してください。猫の写真の最初の2行だけを含めました。各「行」の要素の数は、使用可能な水平方向の幅と各画像の幅によって異なることに注意してください。ラッパーに明示的な幅を指定し、<div>sに明示的な幅を指定すると、各行に表示される幅を制御できます。

もう1つ覚えておくべきことは、inline-blockCSSプロパティ値は古いIEブラウザーでは機能しないということです。（6と7、確かに。IE8のサポートについてはよくわかりません。）

于 2013-02-14T21:09:09.653 に答える
-1

デモ： http： //jsfiddle.net/kLmpV/

これが出発点です。これを理解できるかどうかを確認し、テーブルを同様のレイアウトに変換してください。

html

 <div class="wrapper">
        <article>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </article>

        <article>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </article>

        <article>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </article>

        <article>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </article>

        <article>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </article>
    </div>

css

.wrapper {
    margin: 1%;
    background: #f5f5f5;
    overflow: hidden;
}

.item {
    height: 200px;
    float: left;
    display: inline-block;
    width: 23%;
    position: relative;
    background: pink;
    margin: 1%;
}
于 2013-02-14T21:08:29.390 に答える