Верстка таблиц

[Heidel]

HTML-код

<table id="inventory" width="100%">
  <caption>
 Table 1: Current Inventory
  </caption>
  <colgroup>
  <col id="product">
  <col id="price">
  <col id="rating">
  </colgroup>
    <tbody><tr>
      <th scope="col">Product</th>
      <th scope="col">Price</th>
      <th scope="col">Rating</th>
    </tr>
    <tr class="alt">
      <td>Vitae Quam Lorem</td>
      <td>$19.95</td>
      <td class="rating"><img src="images/star.png" width="16" height="16" alt="star"><img src="images/star.png" width="16" height="16" alt="star"><img src="images/star.png" width="16" height="16" alt="star"><img src="images/star.png" width="16" height="16" alt="star"><img src="images/star.png" width="16" height="16" alt="star"></td>
    </tr>
    <tr>
      <td>In Tempus Velit</td>
      <td>$14.55</td>
      <td><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span></td>
    </tr>
    <tr class="alt">
      <td>Lorem Ipsum Dolor Sat</td>
      <td>Priceless</td>
      <td><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span></td>
    </tr>
    <tr>
      <td>Quis Felis Fringilla</td>
      <td>$29.95</td>
      <td><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span></td>
    </tr>
    <tr class="alt">
      <td>Nunc Sem Pharetra</td>
      <td>$75.99</td>
      <td><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span></td>
    </tr>
    <tr>
      <td>Vel Faucibus Elit</td>
      <td>$82.00</td>
      <td><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span></td>
    </tr>
    <tr class="alt">
      <td> Non Adipiscing Vitae</td>
      <td>$1.95</td>
      <td><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span></td>
    </tr>
    <tr>
      <td>Aenean Orci Ante</td>
      <td>$17.95</td>
      <td><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span></td>
    </tr>
    <tr class="alt">
      <td>Venenatis Non Adipiscing</td>
      <td>$44.00</td>
      <td><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span><span class="rating"><img src="images/star.png" width="16" height="16" alt="star"></span></td>
    </tr>
  </tbody></table>

Группировка по столбцам

  <colgroup>
  <col id="product">
  <col id="price">
  <col id="rating">
  </colgroup>

Далее можно задавать свойства для выбранных столбцов

#price, #rating {
  width: 100px;
}

Поддерживаемые свойства:
width
background

@темы: HTML, Верстка, CSS, Верстка таблиц