Cara paling umum untuk menulis tabel HTML dengan header vertikal?

97

Hai semua sudah lama sejak saya bertanya sesuatu, ini adalah sesuatu yang mengganggu saya untuk sementara waktu, pertanyaan itu sendiri ada di judul:

Apa cara yang Anda sukai untuk menulis tabel HTML yang memiliki tajuk vertikal?

Yang saya maksud dengan header vertikal adalah tabel memiliki <th>tag header ( ) di sisi kiri (umumnya)

Header 1 data data data
Header 2 data data
Header 3 data data data

Mereka terlihat seperti ini, sejauh ini saya telah menemukan dua opsi

Pilihan pertama

   
    <table id="vertical-1">
            <caption>First Way</caption>
            <tr>
                <th>Header 1</th>
                <td>data</td><td>data</td><td>data</td>
            </tr>
            <tr>
                <th>Header 2</th>
                <td>data</td><td>data</td><td>data</td>
            </tr>
            <tr>
                <th>Header 2</th>
                <td>data</td><td>data</td><td>data</td>
            </tr>
        </table>

Keuntungan utama dari cara ini adalah bahwa Anda memiliki header yang tepat (benar-benar meninggalkan) di sebelah data yang diwakilinya, apa yang tidak saya lakukan seperti namun adalah bahwa <thead>, <tbody>dan <tfoot>tag yang hilang, dan tidak ada cara untuk memasukkan mereka tanpa melanggar nicelly menempatkan elemen bersama, yang membawa saya ke opsi kedua.

Opsi Kedua

   
        <style type="text/css">
            #vertical-2 thead,#vertical-2 tbody{
                display:inline-block;
            }

        </style>
        <table id="vertical-2">
            <caption>Second Way</caption>
            <thead>
                <tr>
                    <th colspan="3">Header 1</th>
                </tr>
                <tr>
                    <th colspan="3">Header 2</th>
                </tr>
                <tr>
                    <th colspan="3">Header 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>row 1</td>
                    <td>row 1</td>
                    <td>row 1</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">Footer</td>
                </tr>
            </tfoot>
        </table>

Keuntungan utama di sini adalah bahwa Anda memiliki tabel html sepenuhnya deskriptif, kelemahan adalah bahwa representasi yang tepat perlu sedikit CSS untuk tbodydan theadtag dan bahwa hubungan antara header dan data tidak sangat jelas seperti yang saya punya keraguan saya saat membuat markup.

Jadi, kedua cara merender tabel sebagaimana mestinya, berikut ini pitcure:

memberikan
Dengan tajuk di sisi kiri atau kanan jika Anda lebih suka, jadi, ada saran, alternatif, masalah browser?

html css datatable semantic-markup Tristian
sumber

Jawaban:

46

Pertama, opsi kedua Anda bukan HTML yang cukup valid dalam arti bahwa semua baris (TR) dalam tabel harus berisi jumlah kolom (TD) yang sama. Header Anda memiliki 1 sedangkan badan memiliki 3. Anda harus menggunakan atribut colspan untuk memperbaikinya.

Referensi: "Bagian THEAD, TFOOT, dan TBODY harus berisi jumlah kolom yang sama." - Paragraf terakhir dari bagian 11.2.3 .

Dengan itu , opsi pertama adalah pendekatan yang lebih baik menurut saya karena dapat dibaca terlepas dari apakah saya mengaktifkan CSS atau tidak. Beberapa browser (atau crawler mesin pencari) tidak menggunakan CSS dan oleh karena itu, ini akan membuat data Anda tidak masuk akal karena header akan mewakili kolom, bukan baris.

Francois Deschenes
sumber
Apakah dia benar-benar perlu memperbaiki masalah pertama yang Anda sebutkan itu? Karena jika Anda hanya menambahkan satu sel, secara otomatis mengambil ruang pertama dan sisanya diabaikan?
LouwHopley
hai terima kasih telah menyoroti markup yang tidak valid, saya akan memperbaikinya.
Tristian
@Nideo - Saya telah menambahkan referensi dari dokumentasi HTML4 di posting saya yang dengan jelas menyatakan bahwa THEAD, TFOOT dan TBODY harus berisi jumlah kolom yang sama.
Francois Deschenes
@Triztian - Satu hal lagi. TFOOT harus tepat di bawah THEAD (dan sebelum TBODY). Sekali lagi, ini tercakup dalam bagian 11.2.3 dari spesifikasi HTML.
Francois Deschenes
1
@prodigitalson - scopeAtribut tidak akan membuat banyak perbedaan dalam kasus ini. Jika Anda membaca untuk apa, Anda akan mengerti. Ini pada dasarnya berarti bahwa kolom itu adalah tajuk untuk baris atau kolom yang dikandungnya. Masalahnya adalah penggunaannya tidak masuk akal kecuali jika harus mengganti <th>dengan <td scope="row">.
Francois Deschenes
5

Opsi Pertama ... Saya pikir ini adalah pendekatan yang lebih baik dan sederhana ..

Filemon philip Kunjumon
sumber
0

Jika Anda ingin memperlihatkan elemen kontrol terikat data (seperti pengulang asp) di tabel Anda, maka opsi pertama tidak akan dimungkinkan. Opsi kedua dapat digunakan sebagai berikut.

<asp:Repeater ID="hours" runat="server">
    <HeaderTemplate>
    <table id="vertical-table">
        <thead>
            <tr><th colspan="0">hours:</th></tr>
            <tr><th colspan="1">Monday</th></tr>
            <tr><th colspan="1">Tuesday</th></tr>
            <tr><th colspan="1">Wednesday</th></tr>
            <tr><th colspan="1">Thursday</th></tr>
            <tr><th colspan="1">Friday</th></tr>
            <tr><th colspan="1">Saturday</th></tr>
            <tr><th colspan="1">Sunday</th></tr>
        </thead>
        <tbody>
    </HeaderTemplate>
    <ItemTemplate>
            <tr><td><%# Container.DataItem %></td></tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody>
    </table>
    </FooterTemplate>
</asp:Repeater>
Baz Guvenkaya
sumber
-3 

div.vertical {
  margin-left: -85px;
  position: absolute;
  width: 215px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  /* Safari/Chrome */
  -moz-transform: rotate(-90deg);
  /* Firefox */
  -o-transform: rotate(-90deg);
  /* Opera */
  -ms-transform: rotate(-90deg);
  /* IE 9 */
}

th.vertical {
  height: 220px;
  line-height: 14px;
  padding-bottom: 20px;
  text-align: left;
}
<table>
  <thead>
    <tr>
      <th class="vertical">
        <div class="vertical">Really long and complex title 1</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 2</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 3</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example</td>
      <td>a, b, c</td>
      <td>1, 2, 3</td>
    </tr>
  </tbody>
</table>

Deenathaiyalan Shanmugam
sumber
3
Tambahkan penjelasan tentang bagaimana jawaban Anda mengatasi masalah yang diidentifikasi dalam pertanyaan.
blurfus