Cara Membuat Tabel dan Frame di dalam HTML

-

TABEL DAN FRAME DI HTML

Pada kali ini, kita akan mempelajari tentang Tabel dan Frame di HTML. Kita biasanya menggunakan Tabel dan Frame didalam sebuah halaman website. Tabel digunakan untuk menampilkan informasi dalam halaman web dalam bentuk baris dan kolom. Didalam tabel bisa juga berisi link, gambar atau pun teks. Sedangkan Frame digunakan untuk membuat tampilan halaman HTML yang terbagi-bagi menjadi beberapa dokumen HTML. Baiklah, langsung saja kita pelajari dibawah.

  1. Tabel
    Tabel terdiri dari baris dan kolom yang digunakan untuk menyajikan data. Kolom pada umumnya menunjukan data yang sejenis dan baris terdiri atas kolom-kolom yang menunjukan kelompok data dalam satu kesatuan. Sebuah Tabel mempunyai Judul untuk informasi pada baris dan sel untuk setiap item nya. Tag yang sangat penting dalam pembuatan sebuah tabel yaitu <table>. Berikut daftar elemen-elemen tag dalam pembuatan tabel di HTML.


    Elemen-elemen dalam pembuatan tabel di HTML
    Elemen Fungsi
    <table> ... </table>
    Mendefinisikan sebuah tabel dalam HTML. Gunakan Atribut border untuk menampilkan tabel dengan border.
    <caption>...<caption>
    Mendefinisikan tulisan untuk untuk judul Tabel. Posisi Default judul berada ditengah pada bagian atas tabel. Untuk menempatkannya dibawah gunakan atribut align="bottom".
    <tr>...</tr>
    Mendefinisikan sebuah baris tabel dalam tabel. Tag ini di tulis didalam tag <table> dan bisa mempunyai lebih dari satu baris.
    <th>...</th>
    Mendefinisikan sel header dalam tabel atau baris pertama. Secara Default huruf nya ditebalkan dan ditampilkan ditengah.
    <td>...</td>
    Mendefinisikan sebuah sel data dalam tabel. Secara Default teks dalam sel ini ditampilkan dengan rata kiri dan tengah secara vertikal. Tag ini ditulis didalam tag <tr>.

    Dalam pembuatan Tabel, kita dapat menambah beberapa Atribut seperti border, width, height dan lainnya. Contoh Tabel dalam HTML :

    <table border="5">
       <tr bgcolor="grey">
          <th>Sel Header 1</th>
          <th>Sel Header 2</th>
          <th>Sel Header 3</th>
       </tr>

       <tr>
          <td>Sel Data 1 Baris 1</td>
          <td>Sel Data 2 Baris 1</td>
          <td>Sel Data 3 Baris 1</td>       
       </tr>

       <tr>
          <td>Sel Data 1 Baris 2</td>
          <td>Sel Data 2 Baris 2</td>
          <td>Sel Data 3 Baris 2</td>       
       </tr>      

       <tr>
          <td>Sel Data 1 Baris 3</td>
          <td>Sel Data 2 Baris 3</td>
          <td>Sel Data 3 Baris 3</td>      
       </tr>
 </table>

    Hasil Tabel dalam HTML :
    Sel Header 1 Sel Header 2 Sel Header 3
    Sel Data 1 Baris 1 Sel Data 2 Baris 1 Sel Data 3 Baris 1
    Sel Data 1 Baris 2 Sel Data 2 Baris 2 Sel Data 3 Baris 2
    Sel Data 1 Baris 3 Sel Data 2 Baris 3 Sel Data 3 Baris 3

  2. Frame
    Framing digunakan untuk membuat tampilan halaman HTML yang terbagi-bagi menjadi beberapa dokumen HTML. Setiap bagian halaman HTML yang salah satu atau beberapa bagian berganti-ganti isinya sedangkan ada bagian yang tetap jadi dapat melakukan efisiensi terhadap bandwidth koneksi internet dan mempercepat proses download halaman. Contoh HTML dalam pembuatan frame menggunakan sintak :

    <html>
    <head>
    </head>
    <frameset border="#" {[rows|cols]} = {#, [#,[...]]}>
          <frame src="URL" name="FrameName">
    </frameset>
    </html>

    Atribut dalam Frame
    Atribut Fungsi
    frameset cols Membuat frame vertikal dengan lebar kolom tertentu.
    frameset rows Membuat frame horizontal dengan tinggi baris tertentu.
    frame srcMemasukkan dokumen HTML ke dalam frame.
    noframe Memasukkan body teks yang tidak menampilkan frame.
Demikian postingan saya kali ini, semoga berguna dan bermanfaat bagi kita semua. Kekurangan dan kesalahan saya mohon maaf, dan jika belum paham atau ingin bertanya berikanlah komentar dibawah. Atas kunjungannya saya ucapkan Terima Kasih.

Comments

Post a Comment

Popular posts from this blog

Pengertian dan Contoh Sederhana tentang Stack dan Queue

-
Image
STACK (Tumpukan) dan Queue (Antrian) Pada kesempatan kali ini, kita akan belajar bersama tentang Stack atau Tumpukan dan Queue atau Antrian. Stack dan Queue ini, berkaitan dengan Struktur Data  dalam sebuah aplikasi namun bisa juga dalam kehidupan sehari-hari kita. Stack dan Queue merupakan fungsi yang biasanya diimplementasikan pada program, tidak terkecuali Pemrograman Java. Untuk itu, sebelum membahas program sederhana Stack dan Queue menggunakan Pemrograman Java, kita simak terlebih dahulu pengertian dan penjelasan dari kedua fungsi tersebut dibawah ini.  STACK/Tumpukkan Stack adalah kumpulan suatu elemen dimana hanya elemen yang baru dimasukkan yang dapat diakses atau dilihat. Stack merupakan perintah pengumpulan data secara linear yang menyusun data seperti tumpukan dan bersifat Last In First Out(LIFO) yang berarti data yang terakhir masuk adalah data yang pertama keluar. Contoh dalam Kehidupan sehari-hari : Setumpuk koran, dimana koran yang paling terakhir ditamb
Read more

Permainan Logika tentang Algoritma

-
Image
3 Permainan Logika Tes IQ Pada kesempatan waktu ini, saya akan memberikan atau membahas tentang sebuah Game atau Permainan yang berkaitan dengan Tes IQ, karena Permainan ini harus dilakukan menggunakan akal, nalar dan logika kita. Karena Permainan ini berkaitan Algoritma, yang menyelesaikan masalah dengan logika, maka dalam postingan ini saya bahas bagaimana Algoritma dalam Game tersebut. Baik, langsung saja kita bahas dibawah bagaimana penyelesaiannya. Game Wolf, Sheep & Cabbage (Petani, Domba, Serigala dan Sayuran)  Pada permainan ini, terdapat Seorang Petani dengan membawa seekor Serigala, seekor kambing, dan rumput yang terkira beratnya tidak jauh berbeda. Untuk pergi ke kota di tengah perjalanan, Petani tersebut harus meyeberangi sungai dengan perahu. Namun kapasitas perahu, tidak memungkinkan untuk Petani tersebut membawa semuanya. Ia harus membawa satu persatu bawaannya. Tetapi ketika Petani tersebut menyeberangkan, sisa bawaannya harus tidak saling berhu
Read more

Cara Menyisipkan Tanggal (JCalender) di Java NetBeans dan di Simpan dalam Database

-
Image
JCalender di Java Netbeans Artikel ini adalah kelanjutan dari artikel sebelumnya tentang database yaitu Contoh Database dengan XAMPP dan Java Netbeans yang tidak menyisipkan komponen tanggal. Maka untuk kali ini, Firman akan memberikan Contoh Program Database dari Java yang dapat memasukkan data tanggal. Biasanya digunakan saat kita membuat program untuk memasukkan tanggal lahir, tanggal saat kita melakukan penjualan pada aplikasi atau lainnya. Lalu bagaimana cara membuat program yang dapat memasukkan data tanggal dan disimpan didalam Database. Baiklah langsung saja kita simak berikut dibawah ini. Saat kita ingin memasukkan tanggal di JFrame Form, kita harus mempunyai sebuah komponen yang dapat menampilkan data tanggal. Oleh karena itu, kita membutuhkan sebuah library (pustaka) untuk mengolah data tanggal tersebut. Library tersebut adalah JCalender   yang mempunyai format .jar . Secara default Library tersebut tidak ada di dalam Palette bawaan Netbeans. Jadi, kita bisa menamb
Read more