Cara membuat tabel HTML di tengah

KeyzeX - Tabel digunakan untuk menyajikan sebuah data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdisi atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan. Kolom informasi secara sederhana digambarkan seperti berikut.

Table of Contents Show

Gunakan CSS untuk Membuat Tabel
Beberapa Browser Web Lama Tidak Mendukung Metode Ini
Langkah langkah membuat tabel di HTML?
Apa itu align di HTML?
Jika ingin membuat tabel di HTML menggunakan tag apa?
Apa itu TR dan TD dalam HTML?

Tabel mempunyai judul, tempat anda menjelaskan kolom atau baris yang dilibatkan, baris untuk informasi, dan sel untuk setiap item-itemnya. Pada tabel berikut, kolom pertama berisi Informasi header, setiap harus menjelaskan sebuah tag tabel HTML ini, dan setiap sel berisi sebuah pasangan tag atau penjelasan mengenai fungi tag tersebut.

Elemen	Penjelasan
<Table>...</table>	Mendefinisikan sebuah Table dalam HTML jika atribut border dituliskan maka browser akan menampilkan tabel dengan border
<th>...</th>	Mendefinisikan sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan di tengah.
<caption>...</caption>	Mendefinisikan tulisan untuk judul tabel. Posisi default dari judul adalah ditengah pada bagian paling atas table. Atribut align="left" dapat digunakan untuk menempatkan judul pada bagian kiri tabel Catatan: Judul dapat diberi tag apa saja.
<tr>...</tr>	Menspesifikan sebuah baris table dalam tabel. Agan dapat mendefinisikan seluruh atribut untuk seluruh baris. Align(left, center, right) dan valign(top,middle,bottom).
<td>...</td>	Mendefinisikan sebuah sel data tabel. Secara default teks dalam sel ini ditampilkan rata kiri, dan di tengah scara vertikal. Sel data tabel dapat berisi atribut untuk mendefinisikan karakteristik dari sel dan isinya.

Atribut Tabel

Atribut yang didefinisikan dalam <th>...</th> atau <td>...</td> akan menggantikan alignment default yang didefinisikan dalam <tr>...</tr>

Elemen	Penjelasan
align={left/center/right}	Alignment horizontal untuk sel
valign={top/middle/bottom}	Mendefinisikan alignment vertikal dalam sel
colspan=n	Sejumlah n kolom sebuah sel diperlebar.
Rowspan=n	Sejumlah n baris sebuah sel diperbesar.
Nowrap	Mematikan wrapping dalam sebuah sel.

Berikut ini adalah contoh bagaimana membuat tabel dalam dokumen HTML.

<html>
<body>
<Center>
<p> <font size="12px">Selamat Belajar TABEL</font></p>
<p><font size="4px">www.keyzex.id</font></p>
</Center>
<h2> Membuat Satu Kolom Tabel :</h2>
<table border="1">
<tr>
<td>KeyzeX - Share All That You Need </td>
</tr>
</table>
<h2> Satu baris dan dua kolom :</h2>
<table border="1">
<tr>
<td> KeyzeX </td>
<td> Share All That You Need </td>
</tr>
</table>
<h3> Satu baris dan tiga kolom : </h3>
<table border="1">
<Tr>
<td> KeyzeX </td>
<td> - </td>
<td> Share All That You Need</td>
</Tr>
</table>
</body>
</html>

Catatan :

Jumlah baris tabel ditentukan dengan banyaknya <tr>....</tr> yang dituliskan dalam elemen tabel dari <table>..</table>.
Jumlah kolom dalam tabel ditentukan dengan banyaknya tag <td>...</td> didalam setiap definisi baris dari <tr>..</tr>.

Cascading Style Sheets (CSS) adalah bahasa style sheet yang paling sering digunakan untuk mengatur gaya visual halaman web yang ditulis dalam HTML dan XHTML. Anda mungkin baru mengenal desain web atau CSS dan memiliki pertanyaan tentang cara memusatkan meja di halaman web. Anda juga mungkin seorang perancang berpengalaman yang bingung tentang bagaimana melakukan teknik ini sekarang karena atribut CENTER dan align = "center" tidak digunakan lagi dalam tag TABEL. Dengan CSS, memusatkan tabel pada halaman web sama sekali tidak sulit.

Gunakan CSS untuk Membuat Tabel

Anda dapat menambahkan satu baris ke lembar gaya CSS Anda untuk memusatkan semua tabel secara horizontal:

atau Anda dapat menambahkan baris yang sama ke meja Anda secara langsung:

Saat Anda menempatkan tabel di halaman web, Anda menempatkannya di dalam elemen tingkat blok seperti BODY, P, BLOCKQUOTE, atau DIV. Anda dapat memusatkan meja di dalam elemen itu dengan menggunakan margin: otomatis; gaya. Ini memberitahu browser untuk membuat margin di semua sisi tabel sama, yang memposisikan tabel di tengah halaman web.

Beberapa Browser Web Lama Tidak Mendukung Metode Ini

Jika situs Anda harus mendukung browser web yang lebih lama, seperti Internet Explorer 6, maka Anda harus terus menggunakannyaalign = "center" atau tag CENTER untuk memusatkan tabel Anda. Itu tentang satu-satunya komplikasi yang akan Anda hadapi ketika memusatkan tabel Anda pada halaman web. Menggunakan teknik ini mudah dan dapat dilakukan dalam hitungan menit.

Langkah langkah membuat tabel di HTML?

Cara Membuat Tabel di HTML <table> – tag pertama yang wajib ditulis saat membuat tabel, berfungsi untuk membungkus tabel. <thead> – berfungsi untuk membungkus kepala tabel. <tbody> – berfungsi untuk membungkus tubuh tabel. <tr> – berfungsi untuk membuat baris tabel, singkatan dari Table Row.

Apa itu align di HTML?

Atribut HTML align merupakan atribut yang digunakan untuk menata perataan teks. Atribut align biasanya digunakan pada HTML element pada tingkatan blok seperti DIV, P (paragraf), header dan lainnya. Atribut align juga dapat diterapkan pada tabel agar konten pada data tabel nilai perataannya dapat diatur.

Jika ingin membuat tabel di HTML menggunakan tag apa?

Membuat tabel HTML tidaklah susah. Pertama, Anda perlu mengenali tag-tag yang digunakan untuk membuat tabel, seperti <table>, <tr>, dan <td>. Jika sudah paham dengan penggunaan tag, Anda juga dapat mengkustomisasi tabel dengan atribut.