Help:Tables/id


 * Tabel mengalihkan ke sini; untuk informasi mengenai struktur tabel basis data, lihat.

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.

Ringkasan markah tabel wiki

 * 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 &lt;nowiki&gt; &lt;/nowiki&gt; markah untuk escape.

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

{| style="width:100%" ! style="width: 50%;"|Anda mengetik ! style="width: 50%;"|Hasilnya
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

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.

{| style="width:100%" ! style="width: 50%;"|Anda mengetik ! style="width: 50%;"|Anda mendapatkan
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

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

{| style="width:100%" ! style="width: 50%;"|Anda mengetik ! style="width: 50%;"|Hasilnya
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

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

{| style="width:100%" ! style="width: 50%;"|Anda mengetik ! style="width: 50%;"|Hasilnya
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

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.

{| style="width:100%" ! style="width: 50%;"|Anda mengetik ! style="width: 50%;"|Hasilnya
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

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

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

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

{| style="width:100%" ! style="width: 50%;"|Anda mengetik ! style="width: 50%;"|Hasilnya
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

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.

{| style="width:100%" ! style="width: 50%;"| Anda mengetik ! style="width: 50%;"| Hasilnya
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

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

{| style="width:100%" ! style="width: 50%;"| Anda mengetik ! style="width: 50%;"| Hasilnya
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

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.

{| style="width:100%" ! style="width: 50%;"| Anda mengetik ! style="width: 50%;"| Hasilnya
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Atribut untuk baris
Anda juga bisa meletakkan atribut di masing-masing baris.

{| style="width:100%" ! style="width: 50%;"|Anda mengetik ! style="width: 50%;"|Hasilnya
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Tepian tabel satu-piksel sederhana
Berikut contoh tepian tabel satu piksel:

{| style="width:100%" ! style="width:50%" | Anda mengetik ! style="width:50%" | Hasilnya
 * style="padding: 5px;" |
 * style="padding: 5px;" |
 * style="padding: 20px;"|


 * }

Tebal tepian
Jika "border-width:" hanya berisi satu angka, angka tersebut diterapkan kepada keempat sisi tepian: {| style="width:100%" ! style="width:50%" | Anda mengetik ! style="width:50%" | Hasilnya
 * style="padding: 5px;" |
 * style="padding: 5px;" |
 * style="padding: 20px;"|


 * }

Jika "border-width:" berisi lebih dari satu angka, keempat angka tersebut adalah untuk atas, kanan, bawah, kiri (INGATLAH arah jarum jam &uarr;&rarr;&darr;&larr;):

{| style="width:100%" ! style="width:50%" | Anda mengetik ! style="width:50%" | Hasilnya
 * style="padding: 5px;" |
 * style="padding: 5px;" |
 * style="padding: 20px;"|


 * }


 * Jika terdapat kurang dari 4 nilai:
 * tiga nilai, artinya,  ,  : maka nilai default untuk   adalah nilai   (nilai kedua). Tebalnya akan sama di sisi kiri dan kanan.
 * dua nilai, artinya,  : maka nilai default untuk   adalah nilai untuk   (nilai pertama), dan   secara default diberi nilai   (nilai kedua). Tebal di atas akan sama dengan di bawah; tebal di kiri akan sama dengan di kanan.
 * satu nilai artinya : maka nilai default untuk   adalah nilai untuk   dan begitu juga untuk   dan  . 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": {| style="width:100%" ! style="width:50%" | Anda mengetik ! style="width:50%" | Hasilnya
 * style="padding: 5px;" |
 * style="padding: 5px;" |
 * style="padding: 20px;"|


 * }

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

Padding
{| style="width:100%;" ! style="width: 50%;"| You type ! style="width: 50%;"| You get
 * -valign=top
 * style="padding:10px" |


 * }

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

{| style="width:100%" ! style="width: 50%;"|Anda mengetik ! style="width: 50%;"|Hasilnya
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Lebar kolom
Lebar kolom bisa ditambahkan sebagaimana berikut.

Anda mengetik:

Hasilnya:

Aksesibilitas sel judul baris/kolom
Table header cells do not explicitly specify which table data cells they apply to (those on their right on the same row, or those below them on the same column). When the table is rendered in a visual 2D environment, this is usually easy to infer.

However when tables are rendered on non-visual media, you can help the browser to determine which table header cell applies to the description of any selected cell (in order to repeat its content in some accessibility helper) using a scope="row" or scope="col" attribute on table header cells. In most cases with simple tables, you'll use scope="col" on all header cells of the first row, and scope="row" on the first cell of the following rows:

{| style="width:100%" ! style="width: 50%;"|You type ! style="width: 50%;"|You get
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Table alignment
Table alignment is achieved by using CSS. The table alignment is controlled by margins. A fixed margin on one side will make the table to be aligned to that side, if on the opposite side the margin is defined as auto. To have a table center aligned, you should set both margins to auto

For example, a right-aligned table:

{| style="width:100%" ! style="width: 50%;"|You type ! style="width: 50%;"|You get
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

And a center-aligned table:

{| style="width:100%" ! style="width: 50%;"|You type ! style="width: 50%;"|You get
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Table floating around text
If you align a table to the right or the left side of the page, the text that comes after the table starts at the end of it, leaving an empty space around the table. You can make the text to be wrapped around the table by making the table to float around the text instead of just aligning it. This can be achieved using the  CSS attribute, which can specify where the table floats to the right side or to the left. When using float, margins doesn't control table alignment and can be used to specify the margin between the table and the surrounding text.

{| style="width:100%" ! style="width: 50%;"|You type ! style="width: 50%;"|You get
 * style="padding: 5px;"|
 * style="padding: 5px;"|

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.
 * style="padding: 5px;"|

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.
 * }

Cell contents alignment
The alignment of cell contents can be controlled with 2 different CSS properties:  and. can be specified at the table, row or individual cells, while  only can be specified at individual rows or cells.

{| style="width:100%" ! style="width: 50%;"|You type ! style="width: 50%;"|You get
 * style="padding: 5px;"|
 * style="padding: 5px;"|
 * style="padding: 5px;"|


 * }

Negative numbers
If you start a cell on a new line with a negative number with a minus sign (or a parameter that evaluates to a negative number), your table can get broken, because the characters  will be parsed as the wiki markup for table row, not table cell. To avoid this, insert a space before the value or use in-line cell markup.

CSS vs attributes
Table borders specified through CSS rather than the border attribute will render incorrectly in a small subset of text browsers.

Common attributes for columns, column groups and row groups
The MediaWiki syntax for tables currently offers no support for specifying common attributes for columns (with the HTML element ), column groups (HTML element  ) and row groups (HTML elements ,   and  ). Those standard HTML elements are not accepted even in their HTML or XHTML syntax.

All the rows and cells (header or data) of the table are rendered within a single implicit row group (HTML element ) without any attributes or styles.

Tables and the Visual Editor (VE)

 * See also: 

See T108245: "Fully support basic table editing in the visual editor". See the list of tasks. Finished tasks are struck. It can be difficult to figure out from the technical language there what exactly has been improved, or what features have been added. Please add explanatory info below.

Can now move or delete columns and rows
Click on a column or row header. Then click on the arrow. From the popup menu click on "Move" or "Delete".

Insert blank row or column
From the same popup menu click on "Insert".

Copy table from web page to Visual Editor
It is possible to copy and paste a table from a web page directly into the Visual Editor (VE). To do so safely, use a sandbox and check the table for proper coding in wikitext source mode and proper display in the Visual Editor and in preview mode.