Cara Membuat Tabel pada blog

Cara Membuat Tabel pada blog

Membuat Tabel

membuat tabel dalam HTML

Saat Anda semakin dalam ke HTML, Anda akan ingin mempelajari berbagai cara untuk menyajikan informasi dengan cara yang lebih teratur. Salah satunya adalah melalui penggunaan tabel.

Tabel dibuat dengan tag <table>. Setiap header dalam tabel ditentukan dengan tag <th> (“header header”) sementara setiap baris ditentukan dengan tag <tr> (“tabel baris”). Data tabel kemudian ditunjukkan dengan tag <td>.

Contoh :

<table>
 <tr>
 <th> Table Header 1 </ th>
 <th> Table Header 2 </ th>
 <th> Table Header 3 </ th>
 </ tr>
 <tr>
 <td> Masukan 1 di bawah header 1 </ td>
 <td> Masukan 1 di bawah header 2 </ td>
 <td> Masukan 1 di bawah header 3 </ td>
 </ tr>
 <tr>
 <td> Masukan 2 di bawah header 1 </ td>
 <td > Input 2 di bawah header 2 </ td>
 <td> Input 2 di bawah header 3 </ td>
 </ tr>
 <tr>
 <td> Masukan 3 di bawah header 1 </ td>
 <td> Masukan 3 di bawah header 2 < / td>
 <td> Masukan 3 di bawah header 3 </ td>
 </ tr>
</ table>

Ini memberi kita sesuatu seperti ini:

contoh tabel 1

Seperti yang bisa Anda lihat, sementara kami memiliki meja, ini agak tidak terorganisir. Untuk membuat ini terorganisir, kita bisa menata kode kita. Untuk melakukan ini, kami menambahkan beberapa styling ke kode. Dalam hal ini, kita semakin lebar:

<table style = "width: 100%">
<tr>
<th> Table Header 1 </ th>
<th> Table Header 2 </ th>
<th> Table Header 3 </ th>
</ tr>
<tr>
<td> Masukan 1 di bawah header 1 </ td>
<td> Masukan 1 di bawah header 2 </ td>
<td> Masukan 1 di bawah header 3 </ td>
</ tr>
<tr>
<td> Masukan 2 di bawah header 1 </ td>
<td> Masukan 2 di bawah header 2 </ td>
<td> Masukan 2 di bawah header 3 </ td>
</ tr>
<tr>
<td> Masukan 3 di bawah header 1 </ td>
<td> Masukan 3 di bawah header 2 </ td>
<td> Masukan 3 di bawah header 3 </ td>
</ tr>
</ table>

Hal ini menghasilkan sesuatu yang lebih terorganisir, seperti yang dapat Anda lihat di bawah ini:

contoh tabel 2

Sekarang, Anda mungkin ingin melangkah lebih maju dan menggunakan batas, atur kesejajaran horizontal atau vertikal untuk isi tabel, perkenalkan pemisah, padding, dll. Namun, Anda perlu mempelajari beberapa CSS untuk melakukan hal-hal seperti ini. Kami menyimpan dasar tutorial ini, wo kita tidak akan membahasnya.

Tags:

Add a Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

error: usahakan untuk tidak mengcopas !!