D. Menggabungkan Beberapa Sel

Dalam membuat tabel, seringkali kita akan memerlukan penggabungan beberapa sel sekaligus. Mungkin saja nilai dari sel pada beberapa baris adalah sama. Bisa juga penggabungan dilakukan untuk memperindah tampilan tabel. HTML menyediakan fasilitas untuk menggabungkan beberapa sel dengan menggunakan atribut colspan dan rowspan pada elemen td atau th. 

Seperti namanya, colspan digunakan untuk menggabungkan beberapa kolom sekaligus, dan rowspan digunakan untuk menggabungkan beberapa baris sekaligus. Nilai yang diisikan pada kedua atribut ini ialah berapa banyak sel yang ingin digabungkan. Misalnya jika ingin menggabungkan tiga kolom, maka kita dapat menuliskan colspan="3". Setelah menggabungkan sel, tentunya kita harus menuliskan lebih sedikit baris atau kolom pada bagian tabel berikutnya.

Untuk mempermudah ilustrasi, perhatikan kode berikut:

<table>

    <tr>

        <th rowspan="2">Teams</th>

        <th colspan="3">Scores</th>

    </tr>

    <tr>

        <th scope="col">Win</th>

        <th scope="col">Draw</th>

        <th scope="col">Lost</th>

    </tr>

    <tr>

        <th scope="row">Na'Vi</th>

        <td>4</td>

        <td>1</td>

        <td>3</td>

    </tr>

    <tr>

        <th scope="row">invictus Gaming</th>

        <td>6</td>

        <td>1</td>

        <td>1</td>

    </tr>

</table>

yang akan menghasilkan tabel seperti berikut:

Perhatikan bagaimana jumlah th berbeda pada baris pertama dan baris kedua, sesuai dengan penggabungan kolom yang dilakukan. thpertama pada baris pertama memiliki atribut rowspan="2" yang berarti sel yang bersangkutan akan bergabung dengan sel pada kolom yang sama di baris berikutnya, sehingga tr untuk baris kedua hanya memiliki tiga buah th. Selanjutnya, th kedua pada baris pertama memiliki atribut colspan="3", yang berarti tiga kolom selanjutnya akan digabungkan ke dalam satu kolom, sehingga hanya terdapat dua th pada baris ini (dua th selanjutnya tidak perlu dituliskan lagi karena telah digabungkan pada th kedua). 

Perhatikan juga bagaimana atribut scope digunakan pada th yang relevan (memiliki arti langsung pada data) seperti jumlah kemenangan dan nama tim, tetapi browser tidak dapat secara langsung sel yang bersangkutan merupakan nilai kombinasi. Browser dapat mengetahui bahwa sebuah tim memiliki empat kemenangan, dan Na’vi memiliki skor 4/1/3, tetapi browser tidak dapat mengetahui bahwa Na’vi memiliki empat kemenangan. 

Jika kita dapat secara langsung melihat tabel hasil penampilan browser tentunya hal ini tidak menjadi masalah. Tetapi untuk pengguna yang menggunakan alat bantu seperti screen reader, kita perlu memberitahukan secara khusus ke browser sel-sel yang relevan terhadap sebuah nilai. Pemberian makna semantik seperti ini dapat dilakukan dengan memanfaatkan atribut headers pada elemen td.

Atribut headers menerima nilai berupa id dari sel bersangkutan yang memberikan arti pada tabel tersebut. Karena model dari tabel yang mengharuskan kita melihat beberapa sel sekaligus, maka kita dapat mengisikan beberapa id sekaligus ke dalam atribut ini, dengan pemisah berupa spasi. Misalnya, kita dapat memberikan id pada setiap th yang ada pada tabel seperti berikut:

<table>

    <tr>

        <th id="team" rowspan="2">Teams</th>

        <th id="score" colspan="3">Scores</th>

    </tr>

    <tr>

        <th id="win" scope="col">Win</th>

        <th id="draw" scope="col">Draw</th>

        <th id="lost" scope="col">Lost</th>

    </tr>

    <tr>

        <th id="navi" scope="row">Na'Vi</th>

dan kemudian memberitahukan setiap sel yang menyimpan nilai masing-masing id yang relevan terhadap nilai tersebut, seperti berikut:

<td headers="team navi win score">4</td>

    <td headers="team navi draw score">1</td>

    <td headers="team navi lost score">3</td>

</tr>

sehingga perangkat lunak screen reader mengetahui bahwa sel yang berisi nilai “4” merupakan pencatatan akan jumlah kemenangan sebuah tim yang bernama “Na’vi”. Bahkan sebenarnya sebuah perangkat lunak screen reader yang baik akan membaca sel tersebut sebagai “Teams Na’Vi Win Scores is 4”, sesuai dengan isi dari masing-masing sel.