Bu tablo kullanmadan düzeni HTML yapabilir misin?

SORU

7 ŞUBAT 2009, CUMARTESİ

Bu tablo kullanmadan düzeni HTML yapabilir misin?

Tamam, basit bir düzen sorunu bir iki hafta önce vardı. Yani bir sayfa bölümleri bir başlık gerek

 --------------------------------------------------------- 
| Title                                            Button |
 ---------------------------------------------------------

Çok basit bir iş. Şey masa nefret gibi görünüyor ele Web dünya, hangi olduğumu hatırlattı ne zaman diye sordum Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables? Şimdi genel konuya tablolar vs divs/CSS var daha önce konuşuldu, örneğin:

DIV vs Table; ve
Tables instead of DIVs.

Bu düzeni için CSS vs tablolar hakkında genel bir tartışma için uygun değildir. Bu basit bir sorun için bir çözümdür. Yukarıda çeşitli çözümler CSS dahil kullanarak çalıştı:

Düğmesini veya düğmesini içeren; bir div için doğru kaydır
Pozisyon düğmesi için göreli;
Pozisyon göreli mutlak.

Bu çözümlerin hiçbiri farklı nedenlerle tatmin edici idi. Örneğin göreli konumlandırma açılan menü içeriği altında çıktığı z-index sorunu sonuçlandı.

Yukarı geri gitmek zorunda kalmıştım:

<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
  <td class="group-title">Title</td>
  <td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>

Ve o mükemmel çalışır. Basit, olabildiğince geriye doğru uyumludur. (muhtemelen bile IE5 işe yarar) ve çok işe yarıyor. Hiçbir konumlandırma ile veya yüzer çıkardı.

Bu yüzden herkes tablolar olmadan eşdeğer yapabilir?

Gereksinimleri:

Geriye doğru uyumlu:FF2 ve IE6;
Oldukça tutarlı:farklı tarayıcılarda;
Dikey olarak ortalanmış:farklı Yükseklikleri vardır
Esnek:oldukça hassas konumlandırma (dolgu ve/veya teminat) ve stil üzerinde tam kontrol sağlar.

Bir yan not, üzerinde ilginç yazılar birkaç bugün geldim:

DÜZENLEME:Bana şamandıra bu konuda ayrıntılı izin verin. Bu gibi çalışır:

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      .group-header, .group-content { width: 500px; margin: 0 auto; }
      .group-header { border: 1px solid red; background: yellow; overflow: hidden; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-title { float: left; padding: 8px; }
      .group-buttons { float: right; padding: 8px; }
    </style>
  </head>
  <body>
    <div class="group-header">
      <div class="group-title">This is my title</div>
      <div class="group-buttons"><input type="button" value="Collapse"></div>
    </div>
    <div class="group-content">
      <p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
      <p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
      <p>On a side note, I came across a couple of interesting articles today:</p>
    </div>
  </body>
</html>

Teşekkürler 14 ** overflow: hidden bölümü için (nedenini hala alamadım). Sorun burada devreye giriyor işte. Başlık ve düğme dikey olarak ortalanmış olmasını istiyorum diyelim. Bu elemanlar, farklı yükseklik nedeniyle sorunludur. Bu karşılaştırma için:

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      .group-header, .group-content { width: 500px; margin: 0 auto; }
      .group-header { border: 1px solid red; background: yellow; overflow: hidden; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-header td { vertical-align: middle; }
      .group-title { padding: 8px; }
      .group-buttons { text-align: right; }
    </style>
  </head>
  <body>
    <table class="group-header">
    <tr>
      <td class="group-title">This is my title</td>
      <td class="group-buttons"><input type="button" value="Collapse"></td>
    </tr>
    </table>
    <div class="group-content">
      <p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
      <p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
      <p>On a side note, I came across a couple of interesting articles today:</p>
    </div>
  </body>
</html>

mükemmel çalışır.