Bantuan:Tabel

This page is a translated version of the page Help:Tables and the translation is 100% complete.
Other languages:
Bahasa Indonesia • ‎Deutsch • ‎English • ‎Esperanto • ‎Tiếng Việt • ‎Türkçe • ‎Zazaki • ‎català • ‎dansk • ‎español • ‎français • ‎italiano • ‎polski • ‎português • ‎português do Brasil • ‎română • ‎slovenčina • ‎suomi • ‎čeština • ‎русский • ‎тоҷикӣ • ‎українська • ‎հայերեն • ‎العربية • ‎فارسی • ‎മലയാളം • ‎中文 • ‎日本語 • ‎한국어
PD Catatan: Ketika Anda menyunting halaman ini, Anda setuju untuk melepas kontribusi Anda di bawah CC0. Lihat Halaman Bantuan Domain Publik untuk informasi selengkapnya.
PD
Tabel mengalihkan ke sini; untuk informasi mengenai struktur tabel basis data, lihat Manual:Database layout .

Tabel bisa dibuat di halaman-halaman wiki. Sebagai aturan umum, sebaiknya jangan menggunakan tabel kecuali jika memang diperlukan. Markah tabel kerap kali membuat penyuntingan halaman menjadi rumit.[1]

Ringkasan markah tabel wiki

{| permulaan tabel, diperlukan
|+ judul tabel, opsional; hanya diantara permulaan tabel dan baris tabel
|- baris tabel, opsional untuk baris pertama—mesin wiki mengasumsikan baris pertamanya
! sel judul kolom/baris, opsional. Sel judul yang berturut-turut bisa ditambahkan di baris yang sama dengan dipisahkan oleh markah ganda (!!) atau bisa ditambahkan di baris baru, masing-masing dengan markah tunggal (!).
| sel data tabel, opsional Sel data tabel yang berturut-turut bisa ditambahkan di baris yang sama dengan dipisahkan oleh markah ganda (||) atau bisa ditambahkan di baris baru, masing-masing dengan markah tunggal (|).
|} akhir tabel, diperlukan
  • Markah-markah di atas harus dimulai di baris baru kecuali || dan !! ganda untuk menambahkan sel secara berturut-turut dalam satu baris. Akan tetapi, ruang kosong di permulaan baris diabaikan.
  • Artibut HTML. Setiap markah, kecuali akhir tabel, bisa menerima satu atau lebih atribut HTML. Atribut harus diletakkan di baris yang sama dengan markah. Pisahkan masing-masing markah dengan sebuah spasi tunggal.
    • Sel dan judul (| atau ||, ! atau !!, dan |+) berisi konten. Jadi pisahkan atribut dari konten menggunakan sebuah pipa tunggal (|). Konten sel bisa mengikuti di baris yang sama atau di baris berikutnya.
    • Markah tabel dan baris ({| and |-) tidak mengandung konten secara langsung. Jangan tambahkan pipa (|) setelah atribut opsional mereka. Jika Anda secara keliru menambahkan sebuah pipa setelah atribut di markah tabel atau markah baris, parser akan menghapusnya dan atribut terakhir apabila menyentuh pipa tersebut!
  • Konten bisa (a) mengikuti markah sel di baris yang sama setelah atribut HTML opsional atau (b) di baris-baris di bawah markah sel. Konten yang menggunakan markah wiki yang perlu dimulai di baris baru, seperti daftar, judul bagian, atau tabel di dalam tabel, harus berada di baris barunya sendiri.
    • Karakter pipa sebagai konten. Untuk memasukkan karakter pipa (|) ke dalam tabel, gunakan <nowiki>|</nowiki> markah untuk escape.

Dasar

Tabel berikut tidak punya tepian maupun jarak yang bagus tetapi menunjukkan struktur tabel dari markah wiki yang paling sederhana.

Anda mengetik Hasilnya
{|
|Jeruk
|Apel
|-
|Roti
|Pastel
|-
|Mentega
|Es krim 
|}
Jeruk Apel
Roti Pastel
Mentega Es krim

Sel-sel dalam baris yang sama bisa diketikkan di baris yang sama dengan dipisahkan oleh || (dua simbol pipa). Jika teks dalam sel memerlukan baris baru, gunakan <br/>.

Anda mengetik Anda mendapatkan
{|
|Jeruk||Apel||lebih
|-
|Roti||Pastel||lebih
|-
|Mentega||Es<br/>krim||dan<br/>lebih
|}
Jeruk Apel lebih
Roti Pastel lebih
Mentega Es
krim
dan
lebih

Spasi tambahan di dalam sel di markah wiki, sebagaimana yang ada di markah wiki di bawah, tidak mempengaruhi penampilan tabel nantinya.

Anda mengetik Hasilnya
{|
|  Jeruk || Apel || lebih
|-
|   Roti || Pastel || lebih
|-
|   Mentega || Es krim || dan lebih
|}
Jeruk Apel lebih
Roti Pastel lebih
Mentega Es krim dan lebih

Anda juga bisa mengisi sel tabel dengan teks yang panjang atau sintaks wiki yang kompleks:

Anda mengetik Hasilnya
{|
|Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, 
sed diam voluptua. 

At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum
dolor sit amet. 
|
* Lorem ipsum dolor sit amet
* consetetur sadipscing elitr
* sed diam nonumy eirmod tempor invidunt
|}
Lorem ipsum dolor sit amet,

consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  • Lorem ipsum dolor sit amet
  • consetetur sadipscing elitr
  • sed diam nonumy eirmod tempor invidunt

Judul baris/kolom

Judul baris/kolom bisa dibuat menggunakan "!" (tanda seru) bukannya "|" (tanda pipa). Sel judul biasanya ditampilkan tebal dan dijajarkan ke tengah secara default.

Anda mengetik Hasilnya
{|
! style="text-align:left;"| Barang
! Banyak
! Harga
|-
|Jeruk
|10
|7.00
|-
|Roti
|4
|3.00
|-
|Mentega
|1
|5.00
|-
!Total
|
|15.00
|}
Barang Banyak Harga
Jeruk 10 7.00
Roti 4 3.00
Mentega 1 5.00
Total 15.00
Ketika menggunakan atribut seperti yang digunakan di judul 'Barang', gunakan garis vertikal untuk memisahkannya. Bukan memakai karakter tanda seru '!'.

Judul

Judul tabel bisa ditambahkan ke atas tabel manapun dengan cara berikut.

Anda mengetik Hasilnya
{|
|+Pelengkap makanan
|-
|Jeruk
|Apel
|-
|Roti
|Pastel
|-
|Mentega
|Es krim 
|}
Pelengkap makanan
Jeruk Apel
Roti Pastel
Mentega Es krim

class="wikitable"

Gaya sederhana (latar belakang abu-abu muda, tepian, isian, dan jajar ke kiri) bisa diperoleh dengan menambahkan class="wikitable".

Anda mengetik Hasilnya
{| class="wikitable"
|+Pelengkap makanan
|-
|Jeruk
|Apel
|-
|Roti
|Pastel
|-
|Mentega
|Es krim 
|}
Pelengkap makanan
Jeruk Apel
Roti Pastel
Mentega Es krim

colspan and rowspan HTML

Anda bisa menggunakan atribut colspan dan rowspan HTML di sel untuk tata letak yang lebih lanjut.

Anda mengetik Hasilnya
{| class="wikitable"
!colspan="6"|Daftar Belanja
|-
|rowspan="2"|Roti & Mentega
|Pastel
|Roti
|Kue pastri
|colspan="2"|Roti bulan sabit
|-
|Keju
|colspan="2"|Es krim
|Mentega
|Yoghurt
|}
Daftar Belanja
Roti & Mentega Pastel Roti Kue pastri Roti bulan sabit
Keju Es krim Mentega Yoghurt

Artibut HTML

Anda bisa menambahkan atribut HTML ke tabel. Untuk sumber dari pihak yang paling berkuasa mengenai atribut HTML, lihat halaman HTML Specification dari W3C mengenai tabel.

Atribut untuk tabel

Meletakkan atribut setelah markah permulaan tabel ({|) akan menerapkan atribut tersebut ke seluruh tabel.

Anda mengetik Hasilnya
{| class="wikitable" style="text-align: center; color: green;"
|Jeruk
|Apel
|12,333.00
|-
|Roti
|Pastel
|500.00
|-
|Mentega
|Es krim
|1.00
|}
Jeruk Apel 12,333.00
Roti Pastel 500.00
Mentega Es krim 1.00

Atribut untuk sel

Anda bisa meletakkan atribut di masing-masing sel. Contohnya, angka mungkin terlihat lebih baik jika dijajarkan ke kanan.

Anda mengetik Hasilnya
{| class="wikitable"
| Jeruk
| Apel
| style="text-align:right;" | 12,333.00
|-
| Roti
| Pastel
| style="text-align:right;" | 500.00
|-
| Mentega
| Es krim
| style="text-align:right;" | 1.00
|}
Jeruk Apel 12,333.00
Roti Pastel 500.00
Mentega Es krim 1.00

Anda juga bisa menggunakan atribut sel ketika Anda mengetikkan beberapa sel dalam satu baris. Perhatikan bahwa sel-sel berikut dipisahkan oleh ||, dan di dalam masing-masing sel atribut dan nilainya dipisahkan oleh |.

Anda mengetik Hasilnya
{| class="wikitable"
| Jeruk || Apel     || style="text-align:right;" | 12,333.00
|-
| Roti || Pastel       || style="text-align:right;" | 500.00
|-
| Mentega || Es krim || style="text-align:right;" | 1.00
|}
Jeruk Apel 12,333.00
Roti Pastel 500.00
Mentega Es krim 1.00

Atribut untuk baris

Anda juga bisa meletakkan atribut di masing-masing baris.

Anda mengetik Hasilnya
{| class="wikitable"
| Jeruk
| Apel
| style="text-align:right;"| 12,333.00
|-
| Roti
| Pastel
| style="text-align:right;"| 500.00
|- style="font-style: italic; color: green;"
| Mentega
| Es krim
| style="text-align:right;"| 1.00
|}
Jeruk Apel 12,333.00
Roti Pastel 500.00
Mentega Es krim 1.00

Tepian tabel satu-piksel sederhana

Berikut contoh tepian tabel satu piksel:

Anda mengetik Hasilnya
{| border="1" style="border-collapse:collapse"
| Jeruk
| Apel
|-
| Roti
| Pastel
|}
Jeruk Apel
Roti Pastel

Tebal tepian

Jika "border-width:" hanya berisi satu angka, angka tersebut diterapkan kepada keempat sisi tepian:

Anda mengetik Hasilnya
{|style="border-style: solid; border-width: 20px"
|
Halo
|}

Halo

Jika "border-width:" berisi lebih dari satu angka, keempat angka tersebut adalah untuk atas, kanan, bawah, kiri (INGATLAH arah jarum jam ↑→↓←):

Anda mengetik Hasilnya
{|style="border-style: solid; border-width: 10px 20px 100px 0"
|
Halo
|}

Halo

Jika terdapat kurang dari 4 nilai:
  • tiga nilai, artinya top, right, bottom: maka nilai default untuk left adalah nilai right (nilai kedua). Tebalnya akan sama di sisi kiri dan kanan.
  • dua nilai, artinya top, right: maka nilai default untuk bottom adalah nilai untuk top (nilai pertama), dan left secara default diberi nilai right (nilai kedua). Tebal di atas akan sama dengan di bawah; tebal di kiri akan sama dengan di kanan.
  • satu nilai artinya top: maka nilai default untuk right adalah nilai untuk top dan begitu juga untuk bottom dan left. Tebal keempat-empatnya sama dan menghasilkan tepian biasa. Ini adalah jalan pintas dalam menulis.

Metode lain untuk menentukan tebal keempat sisi sel adalah menggunakan "border-left", "border-right", "border-top" dan "border-bottom":

Anda mengetik Hasilnya
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black;" align="center" 
|
Halo
|}

Halo

Atribut HTML (seperti "width=", "border=", "cellspacing=", "cellpading=") tidak memerlukan satuan panjang (diasumsikan menggunakan satuan piksel). Mereka juga tidak valid di HTML 5.

"Cellpadding" adalah untuk mengatur ruang di antara dinding sell dan isi sel.[2]

Properti gaya CSS (yang menimpa atribut HTML) memerlukan satuan panjang eksplisit (jika nilainya bukan 0) seperti "px" untuk piksel.

Dengan atribut HTML dan gaya CSS

Atribut gaya CSS bisa ditambahkan dengan ataupun tanpa atribut HTML lainnya.

Anda mengetik Hasilnya
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10"
|Jeruk
|Apel
|-
|Roti
|Pastel
|-
|Mentega
|Es krim 
|}
Jeruk Apel
Roti Pastel
Mentega Es krim

Padding

You type You get
{|class=wikitable 
| style="padding: 10px" | Contoh dari style="padding:10px"
|-
| style="padding: 50px" | Contoh dari style="padding:50px"<br/><br/>Tetapkan isian di '''MASING-MASING SEL'''
|-
| style="padding:100px" | Contoh dari style="padding:100px"
|}
Contoh dari style="padding:10px"
Contoh dari style="padding:50px"

Tetapkan isian di MASING-MASING SEL
Contoh dari style="padding:100px"

Atribut

Atribut bisa ditambahkan ke judul tabel dan judul baris/kolom sebagaiman berikut.

Anda mengetik Hasilnya
{| class="wikitable"
|+ style="caption-side:bottom; color:#e76700;"|''Pelengkap makanan''
|-
|Jeruk
|Apel
|-
|Roti
|Pastel
|-
|Mentega
|Es krim 
|}
Pelengkap makanan
Jeruk Apel
Roti Pastel
Mentega Es krim

Lebar kolom

Lebar kolom bisa ditambahkan sebagaimana berikut.

Anda mengetik:

{| class="wikitable" style="width: 85%;"
| colspan="2" | Lebar kolom ini 85% dari lebar layar
|-
| style="width: 30%"| '''Kolom ini 30% dari 85% lebar layar'''
| style="width: 70%"| '''Kolom ini 70% dari 85% lebar layar'''
|}

Hasilnya:

Lebar kolom ini 85% dari lebar layar
Kolom ini 30% dari 85% lebar layar Kolom ini 70% dari 85% lebar layar

Aksesibilitas sel judul baris/kolom

Sel judul baris/kolom tidak perlu secara eksplisit menetapkan sel data tabel yang mana yang termasuk baris/kolom mereka (yang ada di kanan mereka di baris yang sama, atau yang ada di bawah mereka di kolom yang sama). Ketika tabel ditampilkan di lingkungan visual 2D, ini biasanya mudah untuk dikenali.

Namun, ketika tabel ditampilkan di media non-visual, Anda bisa membantu peramban menentukan sel judul yang mana yang berlaku ke suatu baris atau kolom (untuk mengulangi kontennya dalam beberapa pembantu aksesibilitas) menggunakan atribut scope="row" atau scope="col" di sel judul. Dalam kebanyakan kasus di tabel yang sederhana, Anda akan menggunakan scope="col" di semua sel judul di baris pertama, dan scope="row" di sel pertama di baris-baris berikutnya:

Anda mengetik Hasilnya
{| class="wikitable"
|-
! scope="col"| Barang
! scope="col"| Banyak
! scope="col"| Harga
|-
! scope="row"| Roti
| 0.3 kg
| $0.65
|-
! scope="row"| Mentega
| 0.125 kg
| $1.25
|-
! scope="row" colspan="2"| Total
| $1.90
|}
Barang Banyak Harga
Roti 0.3 kg $0.65
Mentega 0.125 kg $1.25
Total $1.90

Penjajaran

Penjajaran tabel

Penjajaran tabel dilakukan menggunakan CSS. Penjajaran tabel dikendalikan oleh margin. Margin yang ditetapkan di satu sisi akan membuat tabel dijajarkan ke sisi tersebut, jika ingin di sisi lainnya maka atur margin menjadi auto. Untuk menjajarkan tabel di tengah, atur kedua margin menjadi auto

Contohnya, untuk tabel yang dijajarkan ke kanan:

Anda mengetik Hasilnya
{| class="wikitable" style="margin-left: auto; margin-right: 0px;"
| Jeruk
| Apel
|-
| Roti
| Pastel
|-
| Mentega
| Es krim 
|}
Jeruk Apel
Roti Pastel
Mentega Es krim

Dan tabel yang dijajarkan di tengah:

Anda mengetik Hasilnya
{| class="wikitable" style="margin: auto;"
| Jeruk
| Apel
|-
| Roti
| Pastel
|-
| Mentega
| Es krim 
|}
Jeruk Apel
Roti Pastel
Mentega Es krim

Tabel melayang di sekitar teks

Jika Anda menjajarkan tabel ke sisi kiri atau kanan halaman, teks yang datang setelah tabel akan dimulai setelahnya pula, menghasilkan ruang kosong di sekitar tabel. Anda bisa membuat teks membungkus tabel dengan cara menjadikan tabel melayang di sekitar teks bukannya hanya menjajarkannya. Ini bisa diperoleh menggunakan atribut CSS float, yang bisa menetapkan apakah tabel melayang di sisi kanan atau kiri. Ketika menggunakan float, margin tidak mengendalikan penjajaran tabel dan bisa digunakan untuk menetapkan margin antara tabel dengan teks di sekitarnya.

Anda mengetik Hasilnya
{| class="wikitable" style="float:right; margin-left: 10px;"
| Jeruk
| Apel
|-
| Roti
| Pastel
|-
| Mentega
| Es krim 
|}

Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea 
commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat, 
vel illum dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dolore te 
feugait nulla facilisi.
Jeruk Apel
Roti Pastel
Mentega Es krim

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Perataan isi sel

Perataan isi sel bisa dikendalikan dengan 2 properti CSS yang berbeda: text-align dan vertical-align. text-align bisa ditetapkan di tabel, baris atau sel, sedagnkan vertical-align hanya bisa ditetapkan di baris atau sel.

Anda mengetik Hasilnya
{| class="wikitable"
|- style="vertical-align:top;"
| style="height:100px; width:100px; text-align:left;" | A
| style="height:100px; width:100px; text-align:center;" | B
| style="height:100px; width:100px; text-align:right;" | C
|- style="vertical-align:middle;"
| style="height:100px; width:100px; text-align:left;" | D
| style="height:100px; width:100px; text-align:center;" | E
| style="height:100px; width:100px; text-align:right;" | F
|- style="vertical-align:bottom;"
| style="height:100px; width:100px; text-align:left;" | G
| style="height:100px; width:100px; text-align:center;" | H
| style="height:100px; width:100px; text-align:right;" | I
|}
A B C
D E F
G H I

Peringatan

Bilangan negatif

Jika Anda memulai sel di garis baru dengan sebuah bilangan negatif dengan tanda minus (atau sebuah parameter yang menghasilkan nilai bilangan negatif), tabel Anda bisa rusak, karena karakter |- akan diuraikan sebagai markah wiki untuk baris tabel, bukan sel tabel. Untuk menghindari ini, masukkan spasi sebelum nilainya (| -6) atau gunakan markah sel yang lebih pasti (|| -6).

CSS vs atribut

Tepian tabel yang ditetapkan melalui CSS bukannya atribut border akan ditampilkan secara tidak benar di peramban teks tertentu.

Atribut umum untuk kolom, kelompok kolom dan kelompok baris

Sintaks MediaWiki untuk tabel untuk sekarang tidak memberikan dukungan untuk menetapkan atribut umum untuk kolom (dengan elemen HTML <col />), kelompok kolom (elemen HTML <colgroup></colgroup>) dan kelompok baris (elemen HTML <thead></thead>, <tbody></tbody> and <tfoot></tfoot>). Elemen HTML standar tersebut tidak diterima meskipun dalam sintaks HTML atau XHTML mereka.

Semua baris dan sel (judul maupun data) dari tabel ditampilkan di dalam sebuah kelompok baris secara implisit (elemen HTML <tbody></tbody>) tanpa atribut atau gaya.

Tabel dan Visual Editor (VE)

Lihat pula: Bantuan:VisualEditor/Panduan pengguna

Lihat Phab: T108245: "Fully support basic table editing in the visual editor". Lihat daftar tugasnya. Tugas yang sudah selesai digaristengahi. Bisa jadi sulit untuk memahami dari bahasa teknis di sana mengenai apa-apa saja yang telah diperbaiki, atau fitur apa yang telah ditambahkan. Tolong tambahkan info penjelas di bawah.

Sekarang bisa memindahkan atau menghapus kolom dan baris

Tekan judul kolom atau baris. Lalu tekan tanda panah. Dari menu yang muncul tekan "Move" atau "Delete".

Memasukkan baris atau kolom kosong

Dari menu yang sama tekan "Insert".

Menyalin tabel dari halaman web ke Visual Editor

Anda bisa menyalin dan menempelkan tabel dari halaman web secara langsung ke Visual Editor (VE). Untuk melakukannya dengan aman, gunakan kotak pasir dan periksa kode tabelnya di mode teks wiki sumber dan tampilan tabelnya di Visual Editor dan mode pratayang.

Lihat pula

Catatan

  1. Tabel bisa dibuat menggunakan elemen tabel HTML secara langsung, atau menggunakan pemformatan kode wiki untuk menetapkan tabelnya. Elemen tabel HTML dan penggunaannya telah dijelaskan di berbagai situs web dan tidak akan dibahas di sini. Keuntungan kode wiki adalah tabel dibangun dari simbol-simbol karakter sehingga biasanya menjadi lebih mudah dilihat struktur tabelnya dalam tampilan penyuntingan artikel jika dibandingkan dengan element tabel HTML.
  2. HTML table cellpadding Attribute