Tabel adalah kisi-kisi sel yang membentuk baris dan kolom. Contoh tabel mencakup berbagai laporan keuangan, hasil olahraga, kalender, jadwal, dll. Blok grid individu disebut sel tabel. Sel tabel dapat berisi berbagai macam informasi, termasuk angka, teks, dan bahkan objek video dan audio. Menggunakan bahasa HTML, tabel ditulis baris demi baris.
Elemen
berfungsi sebagai wadah untuk elemen yang mendefinisikan isi tabel. Untuk membuat baris tabel, Anda perlu menambahkan di dalam elemen
tag blok berpasangan
(disingkat dari bahasa Inggris. "taye row" - baris tabel). Berapa banyak tag?
Anda menambahkan, sebanyak mungkin baris dalam tabel dan akan ada. Tag pembuka
menunjukkan awal baris baru dalam tabel. Elemen ditempatkan setelahnya |
(disingkat dari bahasa Inggris. "taye data" - data tabel), yang masing-masing menentukan sel terpisah di baris ini. elemen dalam |
Anda menempatkan konten Anda (teks, angka, gambar, dll.) ditampilkan di sel itu. Akhir baris ditandai dengan tag akhir |
.
Elemen
(disingkat dari bahasa Inggris "taYe heading" - judul tabel) - elemen tabel opsional yang digunakan dengan cara yang sama seperti elemen |
namun, tujuannya adalah untuk membuat header untuk baris atau kolom. Biasanya elemen |
ditempatkan di baris pertama tabel. Browser menampilkan teks dalam sebuah elemen |
dalam huruf tebal dan tengahkan relatif terhadap sel. Menggunakan elemen dalam kode |
membantu orang yang menggunakan pembaca layar dan juga meningkatkan kinerja tabel pengindeksan mesin telusur.
Pertimbangkan tabel sederhana yang memiliki tiga baris dan tiga kolom, dengan sel di baris pertama menjadi judul kolom yang sesuai. Secara default, tabel biasanya ditampilkan tanpa batas:
Contoh: Tabel HTML Sederhana
| Pos 1 | Pos 2 | Pos 3 |
|---|
| Sel 2x1 | Sel 2x2 | Sel 2x3 |
| Sel 3x1 | Sel 3x2 | Sel 3x3 |
Batas meja
Kita sudah tahu bahwa tabel ditampilkan tanpa batas secara default. Untuk menambahkan batas di sekitar tabel, Anda perlu menentukan beberapa aturan lembar gaya sederhana di dokumen Anda. Properti berbatasan mengontrol tampilan garis kisi tabel, dan juga mengatur lebar batas di sekitar tabel dalam piksel. Batas muncul di sekitar tabel dan di antara sel. Tambahkan bingkai lebar satu piksel ke tabel yang sudah dibuat dengan mengatur properti berbatasan untuk semua elemen tabel, misalnya seperti ini:
Contoh: Menerapkan Properti berbatasan
Bingkai di sekitar meja
| Pos 1 | Pos 2 | Pos 3 |
|---|
| Sel 2x1 | Sel 2x2 | Sel 2x3 |
| Sel 3x1 | Sel 3x2 | Sel 3x3 |
Bingkai meja tunggal
Secara default, sel tabel yang berdekatan akan memiliki batasnya sendiri. Ini menghasilkan semacam "batas ganda" seperti yang terlihat pada contoh di atas. Untuk menghilangkan "batas ganda" tambahkan properti CSS perbatasan-runtuh ke lembar gaya Anda:
Contoh: Menerapkan Properti perbatasan-runtuh
Bingkai di sekitar meja
| Pos 1 | Pos 2 | Pos 3 |
|---|
| Sel 2x1 | Sel 2x2 | Sel 2x3 |
| Sel 3x1 | Sel 3x2 | Sel 3x3 |
Bidang tabel dan spasi
Secara default, sel tabel berukuran agar sesuai dengan isinya, tetapi terkadang perlu untuk meninggalkan beberapa padding di sekitar data tabel. Karena spasi dan margin terkait dengan elemen presentasi data, ruang ini dapat disesuaikan menggunakan lembar gaya CSS. bidang sel ( lapisan) Adalah jarak antara isi sel dan batasnya. Untuk menambahkannya, gunakan properti lapisan ke elemen |
atau |
... Jarak sel ( spasi-batas) Apakah jarak antara keduanya ( |
atau |
). Pertama tentukan nilainya memisahkan Properti perbatasan-runtuh elemen
dan kemudian atur jarak antar sel dengan mengubah nilai parameter spasi-batas... Sebelumnya, atribut bertanggung jawab atas bidang dan spasi sel. bantalan sel dan jarak sel elemen
tetapi mereka tidak digunakan lagi dalam spesifikasi HTML5.
Contoh penggunaan lapisan dan spasi-batas:
Contoh: Menerapkan Properti lapisan dan spasi-batas
padding dan spasi batas
Lebar Meja
Lebar yang ditempati oleh tabel di jendela browser dapat ditentukan menggunakan properti lebar CSS, dalam piksel atau persentase. Menentukan lebar tabel dalam piksel memungkinkan Anda menentukan lebar persisnya. Persentase memungkinkan Anda membuat tabel fleksibel, mis. itu akan "meregangkan" atau "menyusut" tergantung pada elemen lain apa yang ada di halaman dan seberapa besar jendela browser.
Berikut adalah contoh menggunakan properti lebar: Tabel (lebar: 100%;) Contoh: Menerapkan Properti lebar
lebar: 100%
Sel gabungan (colspan dan rowspan)
Salah satu fitur utama dari struktur tabel adalah penggabungan sel, yang melibatkan peregangan sel untuk menjangkau beberapa baris atau kolom. Ini memungkinkan struktur tabel yang kompleks: header
atau sel |
digabungkan dengan menambahkan atribut colspan atau rentang baris... Atribut colspan menentukan jumlah sel yang sel tertentu memanjang secara horizontal, dan rentang baris- Tegak lurus.
Kolom gabungan
Penggabungan kolom dicapai dengan menggunakan atribut colspan dalam elemen |
atau |
- sel direntangkan ke kanan untuk menutupi kolom berikutnya. Dalam contoh berikut, nilai atribut colspan sama dengan 2, yang berarti bahwa sel harus mencakup dua kolom.
Contoh: Menerapkan Atribut colspan
Atribut Colspan
| colspan= "2"> Sel dengan dua kolom |
|---|
| Sel 1 | Sel 2 |
| Sel 3 | Sel 4 |
Menggabungkan string
String digabungkan menggunakan atribut rentang baris, berperilaku persis seperti kolom gabungan, dengan satu-satunya perbedaan bahwa rentang sel dari atas ke bawah dan mencakup beberapa baris.
Contoh ini merentangkan sel pertama tabel dua baris ke bawah:
Contoh: Menerapkan Atribut rentang baris
| Sel di dua baris |
Sel 1 | Sel 2 |
|---|
| Sel 3 | Sel 4 |
Atribut rentang baris
| rentang baris= "2"> Sel pada dua baris |
Sel 1 | Sel 2 |
|---|
| Sel 3 | Sel 4 |
Judul tabel
Tag pasangan digunakan untuk membuat judul atau keterangan tabel
(dari keterangan bahasa Inggris - tanda tangan). Elemen
adalah untuk mengatur header tabel. Terletak tepat setelah tag
tetapi di luar deskripsi baris atau sel.
Contoh: Menggunakan Tag
elemen teks
Ini adalah header tabelnya
| Sel di dua baris |
Sel 1 | Sel 2 |
|---|
| Sel 3 | Sel 4 |
Mengelompokkan tag untuk item tabel
Untuk mengelompokkan elemen tabel, gunakan tag
,
dan
... Sama seperti halaman web dapat berisi header, body, dan footer, tabel dapat berisi head, body, dan footer. Untuk mengelompokkan baris secara logis di bagian atas tabel (yaitu, untuk membuat bagian atas tabel), gunakan tag
... Header tabel harus ditempatkan di elemen
, Misalnya:
| Pos 1 | Pos 2< /th> |
|---|
Konten utama (isi) tabel harus berada di dalam elemen
(mungkin ada beberapa blok seperti itu dalam tabel). Untuk mengelompokkan baris secara logis di bagian bawah tabel (yaitu, untuk membuat "footer" tabel), gunakan tag
(tidak lebih dari satu tag diperbolehkan dalam satu tabel
). Dalam kode sumber, tag
ditempatkan sebelum tag
... Terlepas dari pengelompokan logis, salah satu alasan untuk menggunakan elemen
dan
adalah jika tabel Anda terlalu panjang untuk ditampilkan sekaligus di layar (atau untuk dicetak), maka browser akan menampilkan judul (
) dan baris terakhir (
) saat pengguna menggulir tabel Anda.
Contoh: Tag
,
dan
Tag kepala, tubuh, dan kaki
| Ini adalah header tabelnya |
|---|
| Ini adalah footer tabel |
| Sel 1 | Sel 2 | Sel 3 | Sel 4 |
Terlepas dari kenyataan bahwa kita berada di depan
ditambahkan
, itu tetap muncul di akhir tabel. Ini berasal dari fakta bahwa
dapat berisi banyak baris. Tetapi browser perlu merender bagian bawah tabel sebelum mendapatkan semua (berpotensi banyak) baris data. Itu sebabnya
dalam kode ditulis sebelum elemen
.
Tugas
Tabel adalah salah satu elemen terpenting namun kompleks yang harus ada di halaman web. Dengan bantuan mereka, akan lebih mudah untuk menyajikan informasi penting dan berguna dalam bentuk yang agak ringkas. Tentu saja, sebagian besar editor di templat yang bekerja pada mesin yang berbeda memungkinkan Anda untuk secara otomatis memasukkan tabel ke halaman situs atau publikasi terpisah, tetapi bagaimana jika desain sumber daya web, halamannya dibuat dari awal? Kemudian wizard pemula mungkin menghadapi masalah: bagaimana melakukannya Mari kita cari tahu cara membuat elemen ini dengan benar dan cepat. Memilih editorPertama-tama, mulai membuat tabel, Anda harus memutuskan editor tempat Anda akan bekerja. Tentu saja, cara termudah adalah memilih program tempat Anda membuat kode situs utama. Tetapi yang terbaik adalah menggunakan notebook lama yang bagus untuk tujuan ini. Anda mungkin bertanya mengapa mempersulit hidup Anda, karena jika Anda melakukan semuanya sekaligus di editor, maka hasilnya juga dapat langsung terlihat, dan Anda juga dapat menggunakan petunjuk program. Ya, ini benar, tetapi dengan membuat tabel dari awal, Anda tidak hanya akan dapat mempelajari secara menyeluruh prinsip pembuatannya, tetapi juga mencegah kesalahan ketik dan kesalahan yang mengganggu dalam kode utama. Terkadang kursor secara tidak sengaja bergerak ke bawah, dan dalam proses penulisan kesalahan merayap ke dalam kode, yang terkadang sulit ditemukan. Setelah Anda membuat tabel di notepad, Anda dapat menyalin sandinya dan menempelkannya di tempat yang Anda inginkan. Algoritma untuk membuat tabelPertama, mari kita buat algoritma singkat tentang cara membuat tabel di HTML. Ini agar Anda memahami urutan setiap langkahnya. Kemudian kami akan menganalisis dengan tepat bagaimana melakukan setiap poin. 
Mari kita mulai dengan langkah-langkah persiapan. 1. Gambarlah gambar skema tabel pada selembar kertas. 2. Kami menghitung jumlah garis dan sel. Jika jumlah yang terakhir berbeda, kami menghitung untuk setiap baris secara terpisah. 3. Tentukan jumlah sel tajuk di baris (misalnya, sel "Tidak.", "Nama", dll.). 4. Tuliskan parameter utama tabel - warna, tinggi dan lebar, perataan teks - secara umum, apa pun yang menurut Anda perlu. 1. Sisipkan tag tabel. 2. Sisipkan tag baris berdasarkan nomor yang Anda butuhkan. 3. Pada baris, sisipkan tag sel (reguler dan kapital), juga berdasarkan nomor yang telah Anda tulis di atas kertas. 4. Atur parameter untuk tabel secara keseluruhan. 5. Jika perlu, atur indikator untuk masing-masing sel. 6. Kami mengisi sel kami dengan teks. 
Buat tabelJadi Anda telah memilih editor, sekarang mari kita cari tahu cara membuat tabel di HTML. Tag yang digunakan untuk memasukkan tabel ke dalam kode halaman ( ), dipasangkan, yaitu, konstruksi kami dimulai dengan tag ini, dan diakhiri dengan .Setelah memasukkan tag tabel, kami melanjutkan untuk membuat baris dan sel. Segera, kami mencatat bahwa elemen-elemen ini juga berpasangan. Menandai menentukan string, dan | - sel. Untuk sel header, gunakan elemen berpasangan | . Seperti yang telah disebutkan, langkah pertama adalah menggambar garis, lalu menulis sel di dalamnya. Agar tidak bingung, kami menyarankan Anda untuk membuat indentasi di antara setiap blok dalam satu atau dua baris, atau menulis blok elemen baru menggunakan tombol "Tab". Bagaimana mungkin terlihat seperti? Seperti itu: ;;| P/p Tidak. | ;| Nama belakang | ; ;;| 1 | ;| Ivanov | ; | ; .
Seperti yang Anda lihat, tidak ada yang rumit tentang itu. Hal utama adalah jangan bingung dalam jumlah baris dan sel. Jika tidak, meja bisa miring. Kami telah membahas pembuatan tabel dalam HTML, sekarang kami dapat melanjutkan ke parameter matriks itu sendiri dan baris dan selnya. 
Parameter tabelKetika kode ditulis, Anda harus memperhatikan hal-hal berikut: perataan batas, latar belakang, teks, dan sebagainya. Parameter tabel diatur dalam tag ... Ini termasuk:1. Perbatasan - lebar batas. Itu diatur sebagai bilangan bulat. Secara default, batas tabel apa pun adalah nol. 2. Bordercolor - warna perbatasan. Ini dapat diatur sebagai kode warna heksadesimal (# 00008B), dan namanya dalam bahasa Inggris (Biru Tua). Itu selalu abu-abu secara default. 3. Bgcolor - Juga diatur berdasarkan kode atau nama. 4. Align - perataan teks di belakang tabel. Defaultnya rata kiri. Ada opsi berikut untuk parameter ini: - kiri - bungkus ke kanan;
- kanan -membungkus ke kiri;
- center - menampilkan tabel di tengah tanpa pembungkus.
5. Lebar dan tinggi - lebar dan tinggi meja. Ini dapat diatur baik dalam piksel maupun sebagai persentase (relatif terhadap ukuran jendela browser). Meresepkan indikator ini atau itu, Anda harus memberi perhatian khusus pada desainnya. Parameter harus diikuti dengan tanda "sama dengan", diikuti dengan nilai yang ditentukan dalam tanda kutip. Adapun warna teks, ditata dengan cara yang sama seperti teks biasa dalam format HTML. Contoh desain meja: ;;| P/p Tidak. | ;| Nama belakang | ; ;;| 1 | ;| Ivanov | ; | ; .
Parameter stringJadi, kami telah menemukan cara membuat tabel dalam HTML dan mendaftarkan parameter utamanya. Tetapi bagaimana jika kita perlu menyorot satu baris? Haruskah itu ditata berbeda dari teks utama tabel? Parameter string ditulis dalam tag persis sama dengan data tabel. Variabel berikut dapat diatur untuk string:1. Border, bordercolor dan bgcolor sudah Anda ketahui. 2. Align - perataan teks dalam satu baris. Itu bisa mengambil nilai kiri, tengah dan kanan. 3. Valign - tag ini menyelaraskan teks secara vertikal. Dibutuhkan nilai-nilai berikut: - atas - teks disejajarkan dengan batas atas;
- tengah - di tengah;
- bawah - di sepanjang batas bawah.
Contoh format baris: ;| P/p Tidak. | ;| Nama belakang | ; .
Parameter selDan hal terakhir yang perlu diperhatikan bagi mereka yang ingin tahu cara membuat tabel dalam HTML adalah parameter sel individu, baik reguler maupun huruf besar. Faktanya, semuanya dilakukan dengan cara yang sama seperti untuk tabel atau baris. Satu-satunya hal adalah bahwa dua elemen yang lebih penting ditambahkan: 1. Colspan - parameter ini menentukan jumlah kolom yang dapat direntangkan sel. 2. Rowspan - sudah menunjukkan jumlah baris yang ditempati sel ini. Karena desainnya tidak berbeda dengan menulis garis, kami tidak akan memberikan contoh kodenya. 
kesimpulanMembuat meja tidak sesulit kelihatannya pada pandangan pertama. Hal utama saat menulis kodenya adalah ketekunan dan perhatian. Adapun cara menyisipkan tabel ke dalam HTML, Anda hanya perlu menyalin dan menempelkan cipher-nya di tempat yang tepat di halaman Anda di mana menurut Anda seharusnya berada. Jangan ragu untuk bereksperimen, dan Anda akan segera menguasai teknik membuat tabel dengan sempurna. Semoga beruntung!
Tabel HTML sangat fungsional sehingga Anda dapat menggunakannya untuk mengeset seluruh situs (baca). Sekarang kita akan berbicara tentang menyisipkan tabel HTML sederhana ke dalam halaman web, hanya mem-parsing markup, tetapi tidak menyentuh desain, karena lebih baik mendekorasi tabel dengan gaya CSS.
Tag dan atribut tabel
Berikut adalah elemen dasar yang Anda butuhkan untuk membuat tabel:
- wadah di mana meja berada (sama dengan untuk berlabel atau
untuk daftar bernomor).
- berbatasan- atribut yang menentukan ketebalan bingkai. Lebih baik menggunakan properti CSS perbatasan sebagai gantinya.
-
menentukan tanda tangan tabel. Anda tidak perlu menggunakan wadah, tetapi jika Anda masih memutuskan untuk memberi judul tabel, letakkan tepat setelah tag
, di luar sel dan garis.
- tag berpasangan yang berisi baris tabel (sel terletak pada tingkat yang sama secara horizontal).
|
- tag yang membuat sel header tabel. Secara lahiriah, isinya berbeda dari konten di sel lain - biasanya teks di dalamnya |
browser tebal dan terpusat.
- wadah dengan mana sel sederhana dibuat. Berapa banyak tag seperti itu yang akan berisi string (tag
, akan ada banyak sel di dalamnya: satu tag - satu sel.
-
memungkinkan Anda untuk mengelompokkan kolom, dengan cepat dan tanpa mengacaukan kode untuk mendefinisikannya sebagai karakteristik umum. Menggunakan wadah, Anda dapat memisahkan bagian logis dari tabel satu sama lain. Terletak setelah tag
, jika tidak, maka setelah
.
-
digunakan untuk tujuan yang sama dengan
.
mungkin berisi
tapi tidak sebaliknya.
- menjangkau- atribut yang menentukan jumlah kolom tempat properti kontainer diterapkan
.
-
,
dan
- wadah yang memungkinkan Anda untuk membagi tabel, masing-masing, menjadi bagian atas (tajuk), utama (tubuh) dan bawah (akhir). Dalam tabel HTML, urutan tag ini sama dengan urutan wadah
,
dan dalam dokumen HTML.
- colspan diperlukan untuk menggabungkan sel dalam satu baris. Nilai atribut berisi angka yang menentukan jumlah sel yang akan digabungkan.
- rentang baris menggabungkan sel menjadi kolom.
Contoh membuat tabel
Buat dokumen HTML dan salin kode berikut ke dalamnya:
Contoh tabel
Alat pembuatan situs web
| Janji temu | Alat |
| Markup | html | XHTML |
| Registrasi | CSS |
| Perkembangan dari | PHP | Python |
Di browser, dokumen akan terlihat seperti ini: Mari kita analisis baris kode mana yang bertanggung jawab untuk apa.
- buka meja dengan mengatur ketebalan bingkai.
-
Alat pembuatan situs web
- beri judul.
- membuka garis.
|
Janji temu |
- membuat sel dengan desain judul.|
Alat |
- membuat sel tajuk kedua di baris. Parameter colspan menunjukkan bahwa sel ini harus menempati dua secara horizontal.
- menutup saluran. Sisa garis dibuat dengan cara yang sama. |
Markup |
html |
XHTML |
- menambahkan baris kedua tabel dengan sel biasa, bukan header. Baris dan sel berikutnya dimasukkan dengan cara yang sama.
- menutup meja.
adalah tubuh tabel. Tubuh terdiri dari baris dan kolom. Tabel diisi baris demi baris.
Setiap tag membuat baris baru. Selanjutnya di bersarang kolom dibuat. Beberapa kolom dapat dibuat. Dalam hal ini, Anda perlu melacak jumlah kolom di setiap baris. Misalnya, jika baris pertama memiliki 5 kolom, maka baris berikutnya juga harus memiliki 5 kolom. Jika tidak, meja akan mengapung. Dimungkinkan untuk menggabungkan sel.
Cara membuat tabel di html
Mari kita beri contoh, kode html:
| Contoh tabel |
| kolom 1 |
Kolom 2 |
Perhatikan selnya | ... Kami menggunakan atribut colspan khusus untuk menggabungkan sel secara horizontal. Nilai numeriknya menunjukkan jumlah kolom yang akan digabungkan. Ada juga analog dari atribut ini: tag | (tajuk tabel), di mana Anda juga perlu menulis colspan. Hasilnya akan sama. Tapi td biasa sering digunakan.
Sekarang mari kita lihat lebih dekat semua atribut tag.
.
Tandai atribut dan properti
Untuk tag pembuka Anda dapat menulis berbagai atribut.
1. Property align = "parameter" - mengatur perataan tabel. Itu dapat mengambil nilai-nilai berikut:
Pada contoh di atas, kita menyelaraskan tabel di tengah align = "center".
Atribut ini dapat diterapkan tidak hanya ke tabel, tetapi juga ke sel tabel individual. atau string | ... Dengan demikian, keselarasan akan berbeda di sel yang berbeda.
Sebagai contoh
| ... |
| ... |
...
2. Latar belakang properti = "URL" - mengatur gambar latar belakang. Alih-alih URL, alamat gambar latar belakang harus ditulis.
Contoh
| Contoh tabel |
| kolom 1 |
Kolom 2 |
Dikonversi pada halaman menjadi berikut:
Pada contoh di atas, gambar latar belakang kita terletak di folder img (yang terletak di direktori yang sama dengan halaman html), dan gambar tersebut disebut fon.gif. Perhatikan bahwa dalam tag kami telah menambahkan style = "color: white;" ... Karena latar belakang hampir hitam, sehingga teks tidak menyatu dengan latar belakang, kami membuat teks putih.
3. Properti bgcolor = "color" - mengatur warna latar belakang tabel. Sebagai warna, Anda dapat memilih salah satu dari seluruh palet (lihat kode dan nama warna html)
4. Batas properti = "angka" - mengatur ketebalan batas tabel. Pada contoh sebelumnya, kami menentukan batas = "1", yang berarti lebar batas adalah 1 piksel.
5. Property bordercolor = "color" - mengatur warna border. Jika border = "0", maka tidak akan ada border dan warna border tidak akan masuk akal.
6. Properti cellpadding = "number" - lekukan dari bingkai ke konten sel dalam piksel.
7. Properti cellspacing = "number" - jarak antar sel dalam piksel.
8. Properti cols = "number" - jumlah kolom. Jika Anda tidak menentukannya, browser akan menentukan jumlah kolom dengan sendirinya. Satu-satunya perbedaan adalah bahwa menentukan parameter ini kemungkinan akan mempercepat pemuatan tabel.
9. Bingkai properti = "parameter" - cara menampilkan batas di sekitar tabel. Itu dapat mengambil nilai-nilai berikut:
- batal - jangan menggambar batas
- perbatasan - perbatasan di sekitar meja
- atas - batas di bagian atas tabel
- bawah - batas di bagian bawah tabel
- hsides - tambahkan hanya batas horizontal (atas dan bawah tabel)
- vsides - hanya menggambar batas vertikal (kiri dan kanan tabel)
- rhs - batas hanya di sisi kanan tabel
- lhs - batas hanya di sisi kiri tabel
10. Tinggi properti = "angka" - mengatur tinggi tabel: baik dalam piksel atau dalam persen.
11. Aturan properti = "parameter" - tempat untuk menampilkan batas antar sel. Itu dapat mengambil nilai-nilai berikut:
- semua - garis ditarik di sekitar setiap sel dalam tabel
- grup - garis ditampilkan di antara grup yang dibentuk oleh tag , , ,
atau
- cols - garis ditampilkan di antara kolom
- tidak ada - semua perbatasan disembunyikan
- baris - batas digambar di antara baris tabel yang dibuat melalui tag
12. Lebar properti = "angka" - mengatur lebar tabel: baik dalam piksel atau dalam persen.
13. Kelas properti = "nama_kelas" - Anda dapat menentukan nama kelas tempat tabel tersebut berada.
14. Gaya properti = "gaya" - gaya dapat diatur secara individual untuk setiap tabel.
Sekarang saatnya untuk menyelami tabel dan melihat atribut sel tabel. Atribut ini harus ditulis dalam tag pembuka.
.
Atribut dan properti dan |
1. Perataan properti = "parameter" - mengatur perataan sel individual dalam tabel. Itu dapat mengambil nilai-nilai berikut:
- kiri - perataan kiri
- tengah - tengah align
- kanan - perataan kanan
2. Latar belakang properti = "URL" - menyetel gambar latar belakang sel. Alih-alih URL, alamat gambar latar belakang harus ditulis.
3. Properti bgcolor = "color" - mengatur warna latar belakang sel.
4. Property bordercolor = "color" - mengatur warna batas sel.
5. Property char = "letter" - mengatur huruf dari mana perataan harus dilakukan. Nilai atribut align harus disetel ke char.
6. Properti colspan = "number" - mengatur jumlah sel horizontal yang akan digabungkan.
7. Tinggi properti = "angka" - mengatur tinggi tabel: baik dalam piksel atau dalam persen%.
8. Lebar properti = "angka" - mengatur lebar tabel: baik dalam piksel atau dalam persen%.
9. Property rowspan = "number" - mengatur jumlah sel vertikal yang digabungkan.
10. Properti valign = "parameter" - perataan vertikal konten sel.
- top - menyelaraskan isi sel ke bagian atas baris
- tengah - tengah keselarasan
- bawah - sejajarkan ke bawah
- garis dasar - keselarasan garis dasar
Catatan 1 Untuk tag | pilihan yang sama tersedia untuk | ... Parameter untuk satu tag | akan diterapkan secara hierarkis ke semua di dalamnya
Bagaimana mencegah sel tabel saling menempel
Dalam hal menggunakan batas (batas sel) dan bantalan nol antar sel, mereka masih direkatkan dan Anda mendapatkan batas ganda. Untuk menghindari ini, Anda perlu mendaftarkan tabel border-collapse: collapse di stylesheet:
...
Pembaca yang budiman, sekarang Anda telah belajar lebih banyak tentang tag tabel html. Sekarang saya menyarankan Anda untuk melanjutkan ke pelajaran berikutnya.
Kode sumber tabel HTML sederhana
Sel 1 |
Sel 2 |
Sel 3 |
Sel 4 |
Sel 5 |
Sel 6 |
Sel 7 |
Sel 8 |
Sel 9 |
Header tabel HTML
Ada 2 jenis sel dalam tabel HTML. Tag mendefinisikan sel dari tipe biasa. Jika sel bertindak sebagai tajuk, itu diidentifikasi dengan tag.
Contoh tabel HTML dengan judul
| Volkswagen AG |
Daimler AG |
BMW Grup |
|---|
| audi |
Mercedes-Benz |
bmw |
| Skoda |
Mercedes-AMG |
Mini |
| Lamborghini |
Pintar |
Rolls-royce |
Kode sumber tabel HTML dengan tajuk
Volkswagen AG |
Daimler AG |
BMW Grup |
|---|
audi |
Mercedes-Benz |
bmw |
Skoda |
Mercedes-AMG |
Mini |
Lamborghini |
Pintar |
Rolls-royce |
Menggabungkan sel dalam tabel HTML
Tabel HTML memiliki kemampuan untuk menggabungkan sel secara horizontal dan vertikal.
Ke gabungkan sel secara horizontal gunakan colspan = "atribut NS", di sel atau, di mana x
Ke menggabungkan sel secara vertikal gunakan atribut rowspan = " NS", di sel atau, di mana x- jumlah sel untuk digabungkan.
Sel dapat digabungkan secara horizontal dan vertikal pada saat yang bersamaan. Untuk melakukan ini, gunakan atribut colspan dan rowspan untuk sel yang diinginkan:
Teks sel |
Perhatikan bahwa saat Anda menggabungkan sel, jumlah item di baris berubah. Misalnya, jika tabel memiliki 3 kolom dengan sel, dan kami menggabungkan sel pertama dan kedua, maka akan ada 2 elemen di dalam tag yang mendefinisikan baris ini, yang pertama akan berisi atribut colspan = "2".
Contoh tabel HTML dengan rangkaian sel
Sumber tabel HTML dengan sel gabungan
Nissan |
|---|
Model |
Peralatan |
Ketersediaan |
|---|
Nissan Qashqai |
VISIA |
+ |
TEKNA |
+ |
Nissan x-trail |
ACENTA |
+ |
TERHUBUNG |
- |
Header dan footer dan tanda tangan dalam tabel HTML
Tabel HTML dapat dibagi menjadi 3 area: header, body, footer.
Ini dilakukan dengan membungkus baris bagian tabel yang dipilih dengan tag. mendefinisikan area header, - area footer, - badan tabel.
Secara default, header dan footer tidak ditata (ini dapat dilakukan melalui CSS jika diperlukan), tetapi dapat digunakan oleh browser. Misalnya, saat mencetak tabel multi-halaman, header dan footer mungkin diduplikasi pada setiap halaman yang dicetak.
Urutan penempatan tag area yang benar dalam kode HTML tabel adalah sebagai berikut: pertama header, lalu footer, lalu badan utama. Dalam hal ini, bagian utama pada halaman akan ditampilkan di antara header dan footer.
Anda dapat menambahkan tanda tangan ke tabel sesuai kebutuhan. Untuk melakukan ini, gunakan tag.
Contoh tabel HTML dengan header dan footer dan tanda tangan
Kode sumber untuk tabel dengan header dan footer serta tanda tangan
Set lengkap Renault Sandero Stepway
Ciri |
SUTA 09H 6R |
SUTA 09HR6R |
SUTA 15H 5R |
|---|
Ketersediaan |
+ |
+ |
+ |
|---|
Tenaga mesin |
0,9 (90 HP) |
0,9 (90 HP) |
1,5 (90 HP) |
|---|
Bahan bakar |
bensin |
bensin |
diesel |
|---|
Tingkat toksisitas |
Euro 6 |
Euro 6 |
Euro 5 |
|---|
Kolom dan grup kolom
Tabel HTML dapat dibagi menjadi kolom dan grup kolom menggunakan tag and.
Pemisahan ini memungkinkan Anda untuk mengatur gaya untuk tabel menggunakan jumlah minimum properti CSS, sehingga mengurangi jumlah kode tabel (daripada menentukan gaya untuk setiap sel dalam kolom, Anda dapat mengatur gaya untuk satu atau beberapa kolom sekaligus).
Tag dan ditempatkan di dalam tag sebelum tag, AKP6 (EDC) Penularan |
Kode sumber tabel c HTML dan
ZEN 2E2C AL A |
ZEN 2E2C J5 A |
INTENS 2E3C AL A |
Ciri |
|---|
1,5 (90 HP) |
1.2 (115 hp) |
1,5 (90 HP) |
Tenaga mesin |
|---|
diesel |
bensin |
diesel |
Bahan bakar |
|---|
AKP6 (EDC) |
AKP6 (EDC) |
AKP6 (EDC) |
Penularan |
|---|
Tabel dalam tata letak halaman situs
Di situs modern, penting untuk menampilkan halaman dengan benar baik di komputer maupun di perangkat seluler. Tidak disarankan menggunakan tabel untuk membuat kerangka halaman HTML, karena kemampuan untuk mengadaptasi konten ke layar dengan ukuran berbeda (komputer, ponsel cerdas, tablet) hilang.
Tag grup Tabel paling baik digunakan dalam halaman untuk menampilkan konten berformat tabel.
| |
|
| | |
| | |
