html - 我不知道如何将我的网页表转换为 div

Question

我的网站上有这张表，我想将其切换为使用 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>

Answer 1

看看使用像bootstrap这样的框架，它会给你一个基本的 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>

Answer 2

因此，如果您将其分解，HTML 代码包含两个相互嵌套的表格：

<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; 
}

我建议将该内表（带有猫图片的表）保留为表，因为它实际上是图像数据。（演示）

---

如果您真的想将内表转换为<div>s，那么我建议以下内容：

1. 获取每个单元格 ( <td>) 并将其转换为<div>
2. 每个样式都<div>带有display:inline-block;. 这将导致它们彼此相邻出现（内联），但仍具有明确的大小（块）。

以这个演示为例。我只包括了前两行猫图片。请注意，每个“行”中的元素数量取决于可用的水平宽度以及每张图片的宽度。如果您在包装器上指定显式宽度，并在<div>s 上指定显式宽度，那么您可以控制每行中出现的数量。

要记住的另一件事是inline-blockCSS 属性值不适用于较旧的 IE 浏览器。（可以肯定的是 6 和 7。我不确定 IE8 是否支持。）

Answer 3

演示：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%;
}