Belajar HTML Tabel|Cara Membuat Table HTML Dengan Notepad

Belajar HTML Tabel|Cara Membuat Table HTML Dengan Notepad

Sebelum kita menuju ke topik pembahasan mengenai cara membuat table HTML dengan notepad,mari kita mengenal dulu apa itu table HTML dan apa kegunaannya di dalam HTML

Belajar Mengenal HTML Tabel dan fungsi table Didalam HTML

Mengenal HTML Tabel-sama seperti pada program Ms.Excel,dimana pada program tersebut terdapat table untuk mempermudah dalam mengolah data yang kita punya,begitu pula pada HTML sama tujuannya yaitu untuk mempermudah kita dalam mengatur tata letak tampilan web HTML yang kita buat,untuk itu sangat penting sekali memahami table dalam HTML.

Lalu apa itu Table ?

Table merupakan sebuah upaya yang di aplikasikan kedalam program-program computer seperti ms.word,ms.excel dll yang bertujuan untuk,seperti yang saya sebutkan di atas yaitu untuk mempermudah kita dalam mengelola data yang kita punya,dan mempermudah pekerjaan kita.

 

Table itu seperti apa ?

Table ini terdiri atas baris dan kolom,harap di ingat bahwa table terdiri atas baris dan kolom,lalu bagaimana cara membedakan antara baris dan kolom,baiklah mari kita bahas lebih lanjut agar anda tidak pusing nantinya.

Mengenal baris dan kolom di dalam table HTML

Baris

Baris merupakan element table/bagian table yang horizontal artinya lurus,atau mendatar.

Kolom

Kolom merupakan element table/bagian table yang vertikal artinya lurus ke bawah dan tidak mendatar.

Lalu bagaimana anda membedakan antara baris dan kolom di dalam table ?

Banyak orang yang bingung membedakan antara baris dan kolom di dalam suatu table,ini yang menjadi kendala saat kita mulai akan merancang table di dalam HTML,akan seperti apa table yang akan kita buat,dan terdiri atas berapa baris dan kolom table yang akan kita buat.

Oke,meninjau hal itu mari kita kupas hal yang sangat mendasar ini yaitu bagaimana caranya membedakan antara baris dan kolom.perhatikan gambar table berikut ini :

Ini adalah table dengan satu baris

Table di atas merupakan table yang terdiri dari satu baris dan tidak terdapat kolom,lalu bagaimana jika kita ingin menambahkan kolom ?,dengan kata lain menjadikan table di atas,terdiri dari satu baris dan dua kolom,maka hasilnya seperti gambar di bawah ini :

Ini baris 1 kolom 1

Ini baris 1 kolom 2

Jadi pada gambar sebelumnya merupakan,table yang terdiri dari satu baris dan tanpa kolom,sedangkan table yang ke dua terdapat garis tengah yang membagi baris menjadi dua bagian dari baris pada table yang pertama (perhatikan garis tengah),maka terjadilah table yang terdiri atau terbentuk dari dua kolom dan satu baris,atau satu baris dua kolom itu sama saja.jika masih bingung,sekarang perhatikan gambar table di bawah  ini :

Ini baris 1 kolom ke 1	Ini baris 1 kolom ke 2
Ini baris 2 kolom ke 1	Ini  baris 2 kolom ke 2

Baiklah saya kira anda sudah memahaminya,saya sudah jelaskan itu sebisa saya,namun jika masih bingung silahkan berkomentar di akhir artikel ini.

Selanjutnya,kita akan mengenal penggabungan baris dan kolom

Jadi,baris-baris di dalam table dapat kita gabungkan dengan baris di bawah nya,semisal kita punya satu buah table yang terdiri dari dua baris,maka antara baris ke satu dan baris ke dua dapat kita gabungkan menjadi satu,dan begitu juga dengan kolom,baiklah saya kira anda sudah paham.ini akan saya bahas pada pembahasan di bawah ini yaitu mengenai Belajar HTML Tabel|Cara Membuat Table HTML.

Belajar HTML Tabel|Cara Membuat Table HTML :

Pada pembahasan di atas kita sudah mengenal table dan bagian-bagian dari table yaitu baris dan kolom,sekarang mari kita aplikasikan atau membuat table tersebut menggunakan kode HTML.

Bagaimana cara membuat table di dalam HTML ?

Di dalam HTML,kode/script yang di gunakan untuk membuat table yaitu,tag <table> dan </table>,tag ini memiliki atribut atau pelengkap seperti: align |”center”|”left”|”right”| dan bgcolor untuk mengatur warna latarbelakang table serta width,height,cellspacing dan cellspadding,(“width” untuk mengatur lebar table,”height” untuk mengatur lebar table,”cellspacing “ dan “cellpadding”untuk mengatur jarak antar cell pada table).

Bagaimana cara membuat baris table di dalam HTML ?

Di dalam HTML tag yang di gunakan untuk membuat baris pada table adalah tag <tr> dan </tr>,jadi jika kita ingin membuat dua buah baris pada table maka tinggal kita tambahkan saja dua pasang tag <tr> jadi penulisannya seperti ini <tr></tr><tr></tr>,jadi dua tag <tr> pembuka dan dua tag </tr> penutup.

Bagaimana cara membuat kolom table di dalam HTML ?

Di dalam HTML tag yang di gunakan untuk membuat kolom pada table adalah tag <td> dan </td>,jadi jika kita ingin membuat dua buah kolom pada table maka tinggal kita tambahkan saja dua pasang tag <td> jadi penulisannya seperti ini <td></td><td></td>,jadi dua tag <td> pembuka dan dua tag </td> penutup.

Sekarang kita mulai ke cara penulisan antara tag <tr> (baris),dan tag <td> (kolom) jadi di dalam penulisan ke dua tag ini mempunyai aturan,yaitu pada penempatannya,tag <tr>,(baris) di tulis di urutan pertama atau baris pertama sedangkan tag <td>,(kolom),di tulis di baris ke dua setelah tag <tr>,(baris) dan di apit oleh tag pembuka <tr> dan tag penutup </tr>. 

Nah kita sudah mengenal cara membuat table HTML cara membuat baris table HTML dan cara membuat kolom table HTML sekarang kita beralih ke penggabungan baris dan pengganbungan kolom.

Mengenal penggabungan baris dan kolom di dalam table HTML

Untuk menggabungkan baris di gunakan tag <rowspan> dan untuk menggabungkan kolom di gunakan tag <colspan>,jadi misalkan kita mempunyai dua baris di dalam satu table,ketika kita akan menggabungkan ke dua baris tersebut maka kita gunakan <rowspan>,dan menjadi seperti berikut ini <rowspan=”2”>,maka baris pertama dan kedua akan tergabung menjadi satu.dan begitu pula jika kita akan menggabungkan kolom hanya saja tag yang di gunakan yaitu <colspan> 

Baiklah semua mulai kita bahas mulai dari awal mengenai table hingga akhir,dan sekarang saatnya kita belajar table HTML,dan berikut ini langkah-langkah membuatnya : 

1.      Buka program notepad anda

2.      Kemudian ketik script berikut ini :

<html>

<head>

<title>Belajar membuat tabel</title>

</head>

<body>

<table name=”latihan” border=”1”>

            <tr>

                        <td>Ini kolom ke satu di baris ke satu</td>

            </tr>

</table>

</body>

</html>

           Pada kasus ini kita akan membuat table yang terdiri atas satu baris dan satu kolom,setelah selesai di ketik lalu simpan dengan nama (latihan_tabel.html) untuk lokasi penyimpanannya terserah mau anda simpan di mana,jika masih bingung tentang cara penyimpanan file HTML ini silahkan and abaca artikel saya mengenai …………….

3.      Setelah di simpan sekarang tinggal kita buka file latihan_tabel.html maka akan tampak seperti gambar di bawah ini :

Ini kolom ke satu di baris ke satu

4.      Sekarang kita akan menambahkan baris pada table di atas,jadi yang tadinya hanya satu baris maka sekarang kita tambahkan lagi satu baris maka jadi dua,bagaimana itu,begini caranya,seperti yang bahas di pembahasan artikel di atas,bahwa unntuk membuat baris pada table HTML,di gunakan tag <tr>,Jadi tinggal kita tambahkan saja tag <tr> nya maka menjadi seperti berikut ini.

<tr>

                        <td>Ini kolom ke satu di baris ke satu</td>

</tr>

<tr>

                        <td>Ini kolom ke dua di baris ke dua</td>

</tr>

Kemudian anda save dengan cara ctrl + s pada keyboard anda secara bersamaan dan lihat hasilnya pada browser internet anda dengan cara refresh atau dengan menekan f5 pada keyboard anda.

Intinya anda tinggal mengingat bahwa tag <tr> itu untuk membuat baris dan tag <td> itu untuk membuat kolom.

Lalu bagaimana jika kita akan menggabungkan ke dua baris table di atas,caranya begini :

Ubah pada script di atas di bagian <td> menjadi <td >

Kemudian save dan lihat hasilnya,bagaimana sudah mengerti sekarang ?,jika masih belum mengerti silahkan berkomentar di bawah ini,insya allah akan saya jawab dengan baik semampu saya,dan saya sarankan pula agar anda melihat video tutorial cara membuat table di HTML yang sudah saya buat di bawah ini khusus untuk anda sialhkan :

Silahkan anda pahami semua pembahasan yang saya bahas,semoga artikel ini dapat bermanfaat aamiin.