HTML span tag adalah tag yang digunakan untuk menandai sebuah teks yang ingin diubah atau diberi efek tertentu dalam hal tampilan. Tag ini tidak memiliki pengaruh yang signifikan pada tampilan teks, tetapi dapat digunakan bersama dengan CSS untuk memberikan efek tertentu pada teks yang ditandai.
Contoh penggunaan span tag
Contoh penggunaan span tag adalah sebagai berikut:
<p>Ini adalah contoh <span style=”color:red”>teks merah</span> yang ditandai dengan span tag.</p>
Dalam contoh di atas, kata “teks merah” akan ditandai dengan span tag dan diberi efek warna merah menggunakan CSS.
Selain digunakan untuk mengubah tampilan teks, span tag juga dapat digunakan untuk menambahkan atribut seperti id atau class pada teks tertentu sehingga dapat digunakan untuk mengendalikan tampilan dengan lebih spesifik lagi.
<p>Ini adalah contoh <span class=”highlight”>teks yang di highlight</span> yang ditandai dengan span tag.</p>
Dalam contoh di atas, kata “teks yang di highlight” akan ditandai dengan span tag dan diberi class “highlight”.
Kemudian class tersebut dapat digunakan untuk mengendalikan tampilan teks dengan lebih spesifik lagi menggunakan CSS.
Secara keseluruhan, HTML span tag adalah tag yang sangat berguna untuk mengendalikan tampilan teks dengan lebih spesifik dan dapat digunakan bersama dengan CSS untuk memberikan efek yang lebih menarik pada teks.
Dalam pembuatan tabel HTML, Anda mungkin ingin menentukan ukuran dan penyelarasan dari sel-sel individu.
Hal ini dapat dilakukan menggunakan atribut width dan height untuk menentukan ukuran sel, dan atribut align dan valign untuk menentukan penyelarasan konten sel.
Atribut width dan height dapat digunakan untuk menentukan lebar dan tinggi sel dalam pixel atau sebagai persentase dari lebar atau tinggi tabel secara keseluruhan. Contoh:
<td width=”50″ height=”20″>Ini adalah sel dengan lebar 50 pixel dan tinggi 20 pixel</td>
Atribut align dapat digunakan untuk menentukan penyelarasan horizontal dari konten sel.
Nilai yang mungkin untuk atribut ini adalah “left”, “center”, dan “right”.
Contoh:
<td align=”center”>Ini adalah sel dengan konten yang ditengah-tengahkan</td>
Atribut valign dapat digunakan untuk menentukan penyelarasan vertikal dari konten sel. Nilai yang mungkin untuk atribut ini adalah “top”, “middle”, dan “bottom”.
Contoh:
<td valign=”middle”>Ini adalah sel dengan konten yang ditengah-tengahkan secara vertikal</td>
Anda juga dapat menggunakan atribut colspan dan rowspan untuk menentukan bahwa sel harus mencakup beberapa kolom atau baris. Contoh, kode berikut akan menciptakan sel yang mencakup dua kolom:
<td colspan=”2″>Ini adalah sel yang mencakup dua kolom</td>
Secara keseluruhan, atribut width, height, align, valign, colspan, dan rowspan memungkinkan Anda untuk mengontrol ukuran dan penyelarasan sel dalam tabel HTML, memberikan Anda kontrol yang lebih besar atas tata letak dan tampilan tabel Anda.
Contoh html span tag
Berikut ini adalah contoh HTML lengkap yang menunjukkan penggunaan atribut width, height, align, valign, colspan, dan rowspan dalam tabel:
<html>
<head>
<style>
/* CSS untuk mengubah warna latar belakang sel */
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<table border=”1″>
<tr>
<td width=”50″ height=”20″ align=”center” valign=”middle”>Sel 1</td>
<td width=”100″ height=”30″ align=”right” valign=”top”>Sel 2</td>
<td width=”75″ height=”40″ align=”left” valign=”bottom”>Sel 3</td>
</tr>
<tr>
<td colspan=”2″ rowspan=”2″ align=”center” class=”highlight”>Sel 4</td>
<td align=”right”>Sel 5</td>
</tr>
<tr>
<td align=”left”>Sel 6</td>
</tr>
</table>
</body>
</html>
Dalam contoh di atas, atribut width dan height digunakan untuk menentukan ukuran sel, atribut align dan valign digunakan untuk menentukan penyelarasan konten sel, atribut colspan digunakan untuk menentukan bahwa sel 4 harus mencakup dua kolom, dan atribut rowspan digunakan untuk menentukan bahwa sel 4 harus mencakup dua baris.
Sel 4 juga diberi class “highlight” yang digunakan oleh CSS untuk mengubah warna latar belakang sel.
Perhatikan bahwa beberapa atribut juga dapat ditambahkan ke tag <table> atau <td> untuk mengatur tampilan tabel secara keseluruhan, seperti border atau cellpadding
Itulah contoh dari penggunaan atribut width, height, align, valign, colspan, dan rowspan dalam tabel HTML.