rumah > Internet > Untuk apa tabel digunakan dalam html? Contoh: Menggunakan atribut rowpan


Untuk apa tabel digunakan dalam html? Contoh: Menggunakan atribut rowpan




Berkat keserbagunaan tabel dan banyaknya parameter yang mengontrol tampilannya, tabel telah lama menjadi standar pasti untuk tata letak halaman web. Tabel dengan batas tak terlihat tampak seperti kisi modular, di blok-bloknya nyaman untuk menempatkan elemen halaman web. Namun, ini bukan pendekatan yang sepenuhnya benar, karena setiap objek HTML didefinisikan untuk tujuannya masing-masing, dan jika tidak digunakan untuk tujuan yang dimaksudkan, dan di mana pun, ini berarti tidak ada alternatif lain. Hal ini terjadi sejak lama, hingga lapisan menggantikan tabel dalam tata letak situs web. Ini tidak berarti bahwa lapisan sekarang digunakan terus-menerus, tetapi tren telah muncul dengan jelas - tabel digunakan untuk menempatkan data tabular, dan lapisan digunakan untuk tata letak dan desain.

Membuat tabel

Tabel terdiri dari baris dan kolom sel yang dapat berisi teks dan gambar. Tabel biasanya digunakan untuk mengatur dan menyajikan data, namun tabel tidak terbatas pada itu saja. Dengan menggunakan tabel, akan lebih mudah untuk mengatur tata letak halaman dengan mengatur fragmen teks dan gambar sesuai keinginan.

Untuk menambahkan tabel ke halaman web, gunakan tag

. Elemen ini berfungsi sebagai wadah bagi elemen-elemen yang mendefinisikan isi tabel. Tabel apa pun terdiri dari baris dan sel, yang ditentukan masing-masing menggunakan tag Dan di dalam
. Tabel harus berisi setidaknya satu sel (contoh 12.1). Diizinkan, bukan tag gunakan tag . Teks dalam sel diberi gaya dengan tag , ditampilkan oleh browser dalam huruf tebal dan disejajarkan dengan tengah sel. Jika tidak, perbedaan antar sel dibuat melalui tag Dan TIDAK.

Contoh 12.1. Membuat tabel

tag TABEL

sel 1 sel 2
sel 3 sel 4

Urutan sel dan tampilannya ditunjukkan pada Gambar. 12.1.

Halo, para pembaca blog yang budiman! Seringkali pada halaman web, selain teks dan gambar, terdapat kebutuhan untuk menampilkan berbagai data dalam bentuk tabel. Ya, ini bisa dimengerti; tabel adalah cara paling nyaman untuk menyajikan sejumlah besar informasi. Jadi pertanyaannya muncul “Bagaimana cara memasukkan tabel ke dalam html?”. Pada artikel ini saya akan menjawab pertanyaan ini dan memberi Anda banyak contoh berbagai tabel html.

Cara membuat tabel menggunakan HTML

Tabel HTML dibuat dalam empat langkah.

1. Pada langkah pertama kode html menggunakan pair menandai

kami menunjukkan kepada browser bahwa tabel telah dimasukkan ke dalam halaman web:
. Elemen tabel adalah elemen blok halaman web. Oleh karena itu, tabel selalu ditampilkan pada baris baru, menjorok secara vertikal dari elemen yang berdekatan, sehingga tidak perlu ditempatkan dalam satu paragraf.

2. Pada langkah kedua kita membentuk garis tabel, menempatkan tag berpasangan

. Setiap elemen membuat baris terpisah:





3. Selanjutnya pada langkah ketiga kita bentuk sel tabel menggunakan tag berpasangan Dan , yang ditempatkan di dalam elemen . Menandai menciptakan reguler sel, dan sel tajuk, yaitu tajuk kolom yang sesuai:











4. Nah, pada langkah terakhir kita menempatkannya di dalam elemen Dan isi sel. Kode HTML untuk menyisipkan tabel ke halaman web terlihat seperti ini:











Kolom 1Kolom 2Kolom 3
Sel 1-1Sel 1-2Sel 1-3
Sel 2-1Sel 2-2Sel 2-3

Mereka akan membantu Anda menyempurnakan tampilan batas. Dengannya Anda dapat mengubah ketebalan dan warna bingkai, serta mengubah jenis batas.

Teks yang perlu diletakkan di dalam sel tidak perlu diapit, namun jika teksnya besar dapat dipecah menjadi paragraf dengan menggunakan tag

Jika Anda perlu memformat teks yang disisipkan, Anda dapat menggunakan .

Selain teks, kita bisa menempatkan gambar di sel menggunakan tag :

Isi selnya bahkan bisa berupa tabel lain. Dalam hal ini, membuat tabel bersarang tidak berbeda dengan membuat tabel biasa. Hanya di antara tag Dan tag dimasukkan

Dan
, dan baris serta sel dimasukkan ke dalamnya.

Ada beberapa aturan yang perlu diingat saat membuat tabel:

  • hanya tag yang digunakan untuk membuat tabel ;
  • menandai
    • hanya bisa berada di dalam tag
    ;
  • tag
    • , konten tag lainnya diabaikan oleh browser;
  • isi tabel (teks atau gambar) hanya dapat dimuat dalam tag
    • Dan hanya bisa berada di dalam tag
    Dan ;
  • sel tabel harus memiliki setidaknya beberapa konten, jika tidak, browser mungkin tidak menampilkannya sama sekali, tetapi jika beberapa sel harus kosong, maka spasi non-breaking (literal HTML) biasanya ditempatkan di dalamnya;
  • tabel mengacu pada elemen blok halaman web;
  • Ukuran tabel dan selnya bergantung pada konten, mis. meja direntangkan lebar dan tingginya sehingga semuanya pas;
  • lekukan kecil dibuat antara batas masing-masing sel dan antara batas setiap sel dan isinya;
  • teks sel header (elemen ke-th) ditampilkan dalam huruf tebal dan di tengah;
  • Perbatasan di sekitar tabel dan sel-selnya tidak digambar secara default.

    • Judul tabel

    Mari kita mulai dengan tag berpasangan

    , yang memberi judul pada tabel. Teks judul masuk ke dalam tag ini, yang seharusnya berada di dalam tag . Dan tidak masalah di mana dalam kode html tabel Anda menempatkan tag . Selain itu, diperbolehkan menggunakan tidak lebih dari satu elemen dalam tabel yang sama, dan itu harus dimasukkan dalam kode html segera setelah tag
    , browser akan tetap menampilkan header di atas tabel dan menyelaraskannya ke tengah. Tapi biasanya tagnya ditempatkan tepat setelah tag pembuka :









    Ini adalah meja
    Sel 1.1Sel 1.2
    Sel 2.1Sel 2.2

    Menampilkan:

    Bagian Tabel

    Sebuah tabel html secara logis dapat dibagi menjadi beberapa bagian. Ada tiga jenis bagian:

    • bagian tajuk, yang berisi sel header yang membentuk header tabel;
    • bagian tubuh, di mana sel dengan data dasar berada;
    • bagian penyelesaian, tempat sel dengan data ringkasan ditempatkan.

    Bagian header tabel dibentuk menggunakan tag berpasangan

    .

    Bagian tubuh dibuat dengan tag berpasangan

    . Satu tabel html dapat berisi beberapa bagian isi, yang memungkinkan Anda membuat blok struktural yang gaya desain seragam dapat diterapkan.

    Bagian terminasi dibentuk oleh tag berpasangan

    dan dalam satu wadah
    hanya ada satu.

    Semua tag yang dipasangkan ini harus berisi tag tersebut

    , yang membentuk garis-garis yang berhubungan dengan bagian terkait:




















    Kolom 1Kolom 2Kolom 3
    Sel 1.1Sel 1.2Sel 1.3
    Sel 2.1Sel 2.2Sel 2.3
    Hasil 1Hasil 2Hasil 3

    Menggabungkan sel tabel

    Masih berbicara tentang fitur tabel yang paling penting - menggabungkan sel. Atribut digunakan untuk menggabungkan beberapa sel menjadi satu colspan Dan rentang baris tag

    Dan . Atribut colspan menentukan jumlah sel yang digabungkan secara horizontal, dan rowpan – secara vertikal:













    1.11.2-1.3
    2.12.22.3
    3.1-4.13.23.3
    4.24.3

    Contoh hasil:

    1.1 1.2-1.3
    2.1 2.2 2.3
    3.1-4.1 3.2 3.3
    4.2 4.3

    Saat menggabungkan sel, penting untuk memeriksa jumlah sel di setiap baris untuk memastikan tidak ada kesalahan. Ya, desainnya

    		menggantikan dua sel, jadi baris berikutnya harus memiliki dua tag , atau desain yang sama! Jika jumlah sel di semua baris tidak cocok, maka sel tambahan yang kosong akan muncul.

    Contoh kode html yang salah saat menggabungkan sel:








    sel 1.1sel 1.2
    sel 2.1sel 2.2

    Dan hasilnya ditampilkan di browser:

    Itu. Jika Anda menganalisis kode html, Anda akan melihat bahwa baris pertama berisi tiga sel, dua di antaranya digabungkan menggunakan atribut colspan, dan hanya dua sel yang ditambahkan di baris kedua. Oleh karena itu, sel kosong ketiga muncul di baris kedua.

    Atribut tanda

    Dalam posting ini kita telah menemukan satu atribut tag

    . Dengan atribut border, yang menentukan ketebalan batas dalam piksel. Secara default adalah 0 dan oleh karena itu sel ditampilkan tanpa batas secara default.

    Selain atribut border, masih ada beberapa atribut penting lainnya yang didukung oleh tag

    . Mari kita lihat mereka.

    Atribut meluruskan- set penyamarataan tabel di halaman. Dapat mengambil nilai kiri, tengah, kanan, yang mengatur perataan masing-masing ke kiri, tengah, dan kanan. Defaultnya ke kiri.

    Atribut latar belakang, yang mengatur gambar latar belakang Ke meja. Mengambil alamat file gambar sebagai nilainya.

    bgcolor— set warna latar belakang tabel. Dapat digunakan bersama dengan atribut background.

    Atribut warna perbatasan set warna bingkai tabel.

    bantalan sel— mendefinisikan jarak antara batas sel dan isinya. Memungkinkan Anda meningkatkan keterbacaan tabel. Nilainya bisa berupa angka positif apa saja.

    Jarak sel- set jarak antara batas sel terluar.

    Mari kita bicarakan hal ini cara menyisipkan tabel ke halaman html Saya akan menyelesaikannya, rangkum saja:

    • tag digunakan untuk menyisipkan tabel
    — penunjukan meja, - menambahkan garis dan , bagian penyelesaian dan bagian tubuh - ;
  • untuk menggabungkan sel kami menggunakan atribut tag
    • .... Sebuah baris terdiri dari sel-sel, yang ditentukan menggunakan salah satu tag , jika sel ini berisi header atau tag kolom . Judul ditampilkan dalam huruf tebal dan terletak di tengah sel. Data dalam font normal dan rata di sisi kiri sel. Tag digunakan untuk mengatur judul seluruh tabel .

    Contoh

    Kehadiran data di dalam sel tidak diperlukan. Ada dua cara untuk membuat sel kosong: jangan mengisi wadahnya dengan apapun (

    ), atau tempatkan karakter spasi tak terputus di dalamnya, yang ditentukan oleh rangkaian karakter khusus -- (yaitu, buat sel seperti ).

    Tidak perlu membuat sel kosong secara terpisah jika Anda berencana bahwa semua sel yang tersisa di baris tidak akan terisi. Sejak tag

    menandakan dimulainya baris baru, sel kosong akan ditambahkan oleh browser secara otomatis.

    Atribut tag dasar

    — penyisipan sel;
  • tabel adalah elemen blok halaman web;
  • isi sel tidak hanya berupa teks, tetapi juga gambar dan tabel lainnya;
  • sebuah tabel dapat berisi tiga jenis bagian: bagian header -
    • colspan dan rowpan.

    Itu saja, pada postingan selanjutnya saya akan membahas tentang alat navigasi pada situs html. Agar tidak ketinggalan posting ini, berlangganan pembaruan blog saya! Itu saja, sampai jumpa lagi!

    Tag tabel HTML awalnya dimaksudkan untuk mewakili baris dan kolom data yang ditabulasi. Namun, desainer telah belajar bagaimana menggunakannya untuk mengontrol tata letak halaman Web: membuat kolom teks, mengatur jarak antar elemen, dan mengubah tampilan teks dengan cara yang tidak dapat dilakukan oleh tag pemformatan HTML lainnya.

    Tabel dalam HTML selalu berbentuk persegi panjang dan terdiri dari baris-baris, yang selanjutnya terdiri dari sel. Semua konstruksi bahasa yang menjelaskan komponen tabel yang dibuat terdapat di antara tag

    Dan
    .

    Tabel diisi baris demi baris; sepasang tag digunakan untuk menunjukkan string

    ......
    DanJudul tabel
    Judul 1Judul 2
    sel 1sel 2
    sel 3sel 4

    Menetapkan atribut tag dasar

    dan nilai-nilai yang dapat mereka ambil tercantum dalam tabel.

    Atribut

    Tujuan

    Mendefinisikan lebar batas tabel (dalam piksel), misalnya BORDER=1; nilai nol berarti tidak ada bingkai

    Mendefinisikan lebar seluruh tabel dalam piksel, atau sebagai persentase lebar jendela browser

    Mendefinisikan tinggi seluruh tabel dalam piksel atau persentase tinggi jendela browser

    Mengatur perataan horizontal tabel di jendela browser; memiliki nilai kiri, tengah dan kanan (defaultnya kiri)

    Menambahkan ruang kosong antara data di dalam sel dan batasnya; nilai defaultnya adalah 2

    Menambahkan ruang kosong antar sel dalam seluruh tabel; nilai defaultnya adalah 2

    Menentukan area ruang kosong dengan lebar tertentu (dalam piksel) di kiri dan kanan tabel

    Menentukan area ruang kosong dengan ketinggian tertentu (dalam piksel) di atas dan di bawah tabel

    BGCOLOR = warna

    Menetapkan warna latar belakang seluruh tabel

    Menentukan gambar latar belakang untuk tabel, di mana URL adalah alamat sumber (nama file gambar)

    Contoh Mari kita ubah isi dokumen yang dibuat pada contoh sebelumnya dengan menambahkan atribut BORDER dan ALIGN pada tag

    :

    Sekarang sel tabel akan dibingkai dan tabel akan disejajarkan di tengah jendela browser.

    Tabel dalam HTML sangat fungsional sehingga Anda dapat menggunakannya untuk menata letak seluruh situs web (baca). Sekarang kita akan berbicara tentang memasukkan tabel HTML sederhana ke dalam halaman web, hanya menganalisis markupnya, tetapi tidak menyentuh desainnya, karena lebih baik mendekorasi tabel menggunakan gaya CSS.

    Tag dan atribut tabel

    Berikut adalah elemen dasar yang Anda perlukan untuk membuat tabel:

    - wadah di dalamnya terdapat meja (sama dengan
      untuk ditandai atau
        untuk daftar bernomor).
      1. berbatasan- atribut yang menentukan ketebalan bingkai. Lebih baik menggunakan properti CSS perbatasan saja.
    menentukan tanda tangan tabel. Anda tidak harus menggunakan container, namun jika Anda tetap memutuskan untuk memberi judul pada tabel, letakkan segera setelah tag , di luar sel dan baris.
    • - tag berpasangan yang berisi baris tabel (sel terletak pada tingkat horizontal yang sama).
    • , akan ada banyak sel di dalamnya: satu tag - satu sel.
    • memungkinkan Anda mengelompokkan kolom, dengan cepat dan tanpa menyumbat kode, menetapkan karakteristik umum pada kolom tersebut. Dengan menggunakan wadah, Anda dapat memisahkan bagian logis dari sebuah tabel satu sama lain. Ditempatkan setelah tag
    - tag yang membuat sel header tabel. Secara eksternal, isinya berbeda dengan konten di sel lain - biasanya teks di dalamnya Browser menyorotnya dengan huruf tebal dan menempatkannya di tengah.
    		• - wadah yang digunakan untuk membuat sel sederhana. Berapa banyak tag yang akan dimuat dalam satu baris (tag
    , jika tidak ada, maka setelahnya .
    • digunakan untuk tujuan yang sama dengan . mungkin berisi , tapi tidak sebaliknya.
  • menjangkau- atribut yang menentukan jumlah kolom tempat properti kontainer diterapkan
    • .
    • , Dan - wadah yang memungkinkan Anda membagi tabel menjadi bagian atas (judul), utama (badan) dan bawah (akhir). Dalam tabel HTML, urutan tag ini sama dengan urutan container , Dan
    dalam dokumen HTML.
  • colspan diperlukan untuk menggabungkan sel dalam satu baris. Nilai atribut berisi angka yang menentukan jumlah sel yang akan digabungkan.
  • rentang baris menggabungkan sel menjadi kolom.

    • Contoh pembuatan tabel

    Buat dokumen HTML dan salin kode berikut ke dalamnya:

    Contoh tabel

    Alat pembuatan situs web
    TujuanAlat
    MenandaiHTMLXHTML
    DekorasiCSS
    PerkembanganPHPular piton

    Di browser, dokumennya akan terlihat seperti ini:

    Mari kita cari tahu baris kode mana yang bertanggung jawab atas apa.

    • - Membuka meja, memberikan ketebalan bingkai.
      • - mereka memberi judul itu.
      • - membuka saluran.
      • - membuat sel dengan desain header.
      • - membuat sel header kedua di baris. Parameter colspan menunjukkan bahwa sel ini harus membentang dua secara horizontal.
      • - menutup saluran. Garis lainnya dibuat dengan cara yang sama.
      • - menambahkan baris kedua tabel dengan sel biasa, bukan sel header. Baris dan sel berikutnya disisipkan dengan cara yang sama.
      • Alat pembuatan situs web
      Tujuan Alat
      Menandai HTML XHTML
      - menutup meja.

    Kuliah ini membahas secara rinci prinsip penggunaan tabel dalam markup HTML. Ini mencakup organisasi teks dalam tabel, kisi koordinat tabel, dan grafik yang disusun dalam tabel.

    Alat untuk mendeskripsikan tabel dalam HTML

    Seiring berkembangnya WWW, menjadi jelas bahwa sumber daya yang terkandung dalam HTML tidak cukup untuk menampilkan berbagai jenis dokumen berkualitas tinggi. Kerugian dari HTML adalah kurangnya alat untuk menampilkan tabel. Untuk tujuan ini, teks yang telah diformat sebelumnya (tag 

    ), yang tabelnya diuraikan dalam karakter ASCII.  Namun bentuk penyajian tabel ini kurang berkualitas dan menonjol dari gaya umum dokumen.  Setelah pengenalan tabel dalam HTML, Webmaster tidak hanya memiliki alat untuk menempatkan teks dan data numerik, namun juga alat desain yang ampuh untuk menempatkan gambar grafik dan teks di tempat yang tepat di layar.
    

    Membuat tabel dalam HTML
    

    Tag digunakan untuk mendeskripsikan tabel<ТАВLЕ>.  Menandai<ТАВLЕ>, seperti banyak lainnya, secara otomatis menerjemahkan baris sebelum dan sesudah tabel.
    

    Membuat baris tabel - tag<ТR>
    

    Menandai<ТR>(Baris Tabel) membuat baris tabel.  Semua teks, tag dan atribut lain yang perlu ditempatkan pada satu baris harus ditempatkan di antara tag lt;TR>.
    

    Mendefinisikan sel tabel - tag<ТD>
    

    Sel dengan data biasanya ditempatkan di dalam baris tabel.  Setiap sel yang berisi teks atau gambar harus dikelilingi oleh tag<ТD>.  Jumlah tag<ТD>dalam satu baris menentukan jumlah sel
    
 

 
    Meja
    
 
    
 
    
 
    
 Jika sebuah tabel mempunyai dua tag TR, maka tabel tersebut mempunyai dua baris.
 
    
 
    
 Jika ada tiga tag TD dalam satu baris,
 lalu di dalamnya
 tiga kolom.
 
    
 
    
 
    


 
    Judul kolom tabel - tag<ТН>
    

    Judul kolom dan baris tabel diatur menggunakan tag header<ТН>(Tajuk Tabel, judul tabel).  Tag-tag ini serupa<ТD>.  Bedanya, teksnya diapit di antara tag<ТН>, secara otomatis ditulis dalam huruf tebal dan ditempatkan di tengah sel secara default.  Anda dapat membatalkan pemusatan dan meratakan teks ke kiri atau kanan.  Jika Anda menggunakan<ТD>dengan tag<В>dan atribut<АLIGN=center>, teksnya juga akan terlihat seperti judul.  Namun perlu diingat bahwa tidak semua browser mendukung font tebal pada tabel, jadi sebaiknya atur judul tabel menggunakan<ТН>.
    
 

 
    
 
    
 Header dipusatkan secara default
 Header dapat bergabung dengan kolom
 
    
 
    
 Header dapat ditempatkan sebelum kolom
 Teks atau data
 Teks atau data
 
    
 
    
 Header dapat menggabungkan garis
 Teks atau data
 Teks atau data
 
    
 
    
 Teks atau data
 Teks atau data
 
    
 
    
 Teks atau data
 Teks atau data
 
    
 
    



    Menggunakan header tabel - tag<САРТIОN>
    

    Menandai
    memungkinkan Anda membuat header tabel. Secara default, judul berada di tengah dan ditempatkan di atas (<САРТION АLIGN=top>), atau di bawah meja (<САРТION ALIGN=bottom>). Judul dapat terdiri dari teks dan gambar apa saja. Teks akan dibagi menjadi beberapa baris sesuai dengan lebar tabel. Terkadang menandai<САРТION>digunakan untuk menandatangani gambar. Untuk melakukan ini, cukup mendeskripsikan tabel tanpa batas.

    Header di atas tabel
    Teks atau data Teks atau data Teks atau data Teks atau data
    Menuju ke bawah tabel
    Teks atau data Teks atau data Teks atau data

    Atribut SEKARANG

    Biasanya, teks apa pun yang tidak muat di satu baris sel tabel akan berpindah ke baris berikutnya. Namun bila menggunakan atribut NOWRAP dengan tag<ТН>atau<ТD>Panjang sel diperluas sehingga teks yang terkandung di dalamnya muat dalam satu baris.

    Atribut COLSPAN

    Tag<ТD>Dan<ТН>dimodifikasi menggunakan atribut COLSPAN (Column Span, koneksi kolom). Jika Anda ingin membuat sel lebih lebar dari bagian atas atau bawah, Anda bisa menggunakan atribut COLSPAN untuk merentangkannya ke sejumlah sel biasa.

    Jika Anda ingin membuat sel mana pun lebih lebar dari bagian atas atau bawah, Anda dapat menggunakan atribut COLSPAN=2,
    untuk meregangkannya ke sejumlah sel biasa.

    Atribut ROWSPAN

    Atribut ROWSPAN digunakan dalam tag<ТD>Dan<ТН>, mirip dengan atribut COLSPAN=, hanya saja atribut ini menentukan jumlah garis di mana sel direntangkan. Jika Anda menentukan angka yang lebih besar dari satu pada atribut ROWSPAN=s, maka jumlah baris yang sesuai harus berada di bawah sel yang direntangkan. Itu tidak bisa ditempatkan di bagian bawah tabel.

    Atribut LEBAR

    Atribut WIDTH digunakan dalam dua kasus. Anda bisa memasukkannya ke dalam tag<ТАВLЕ>untuk memberikan lebar keseluruhan tabel, atau dapat digunakan dalam tag<ТD>atau<ТН>untuk mengatur lebar sel atau sekelompok sel. Lebarnya dapat ditentukan dalam piksel atau persentase. Misalnya, jika Anda menyetel di tag<ТАВLЕ>WIDTH=250, Anda akan mendapatkan tabel dengan lebar 250 piksel berapa pun ukuran halaman di monitor Anda. Saat mengatur WIDТН=50% di tag<ТАВLЕ>tabel akan menempati setengah lebar halaman pada ukuran gambar apa pun di layar. Jadi, saat menentukan lebar tabel sebagai persentase, perlu diingat bahwa jika pengguna memiliki area pandang yang sempit, halaman Anda mungkin terlihat sedikit aneh. Jika Anda menggunakan piksel dan tabel lebih lebar dari area tampilan, bilah gulir akan muncul di bagian bawah untuk bergerak ke kiri dan kanan melintasi halaman. Tergantung pada tugas yang ada, metode pengaturan lebar tabel mana pun mungkin berguna.

    Teks atau data - lebar 100%
    atau
    Teks atau data - lebar 50%
    atau
    Teks atau data - lebar 200 piksel
    atau
    Teks atau data - lebar 100 piksel

    Menerapkan sel kosong

    Jika sel tidak berisi data, maka sel tersebut tidak memiliki batas. Jika Anda ingin sel memiliki batas tetapi tidak berisi konten, Anda perlu memasukkan sesuatu ke dalamnya yang tidak akan terlihat saat dilihat. Anda dapat menggunakan string kosong<ВR>. Anda bahkan dapat menentukan kolom kosong dengan menentukan lebarnya dalam piksel atau satuan relatif dan tidak memasukkan data apa pun ke dalam sel yang dihasilkan. Alat ini dapat berguna saat menempatkan teks dan grafik pada suatu halaman.

    Atribut SELADDING

    Atribut ini menentukan lebar ruang kosong antara isi sel dan batasnya, yaitu mengatur margin di dalam sel.

    Teks atau data Teks atau data Teks atau data
    Teks atau data Teks atau data Teks atau data

    Teks atau data Teks atau data Teks atau data
    Teks atau data Teks atau data Teks atau data

    Atribut ALIGN dan VALIGN

    Tag<ТR>, <ТD>Dan<ТН>dapat dimodifikasi menggunakan atribut ALIGN dan VALIGN. Atribut ALIGN menentukan apakah teks dan grafik disejajarkan secara horizontal, yaitu kiri atau kanan, atau tengah. Perataan horizontal dapat ditentukan dengan beberapa cara:

    ALIGN=berdarah ke kiri menekan isi sel dekat dengan tepi kiri.

    SEJAJAR=kiri Meratakan isi sel ke kiri, dengan mempertimbangkan lekukan yang ditentukan oleh atribut CELLPADDING.

    SELURUH=tengah Memusatkan isi sel.

    SEJAJAR = benar Meratakan isi sel ke kanan, dengan mempertimbangkan lekukan yang ditentukan oleh atribut CELLPADDING.

    Teks atau data Teks atau data Teks atau data
    Teks atau data Teks atau data Teks atau data
    Teks atau data Teks atau data Teks atau data
    Teks atau data Teks atau data Teks atau data
    Teks atau data Teks atau data Teks atau data

    Atribut VALIGN menyelaraskan teks dan grafik secara vertikal di dalam sel. Perataan vertikal dapat diatur dengan beberapa cara:

    VALIGN=atas Meratakan isi sel ke batas atasnya.

    VALIGN = tengah Memusatkan isi sel secara vertikal.

    VALIGN=bawah Meratakan isi sel ke batas bawahnya.

    Atribut VALIGN menyelaraskan teks dan grafik secara vertikal di dalam sel. atas, tengah, dasar.
    VALIGN=top Menyelaraskan isi sel ke batas atasnya. atas, atas, atas.
    VALIGN=tengah Memusatkan isi sel secara vertikal. tengah, tengah, tengah.
    VALIGN=bawah Menyelaraskan isi sel ke batas bawahnya. dasar, dasar, dasar.

    Atribut PERBATASAN

    Di dalam tag<ТАВLЕ>sering kali menentukan tampilan batas, yaitu garis yang mengelilingi sel tabel dan tabel itu sendiri. Jika Anda tidak menentukan bingkai, Anda akan mendapatkan tabel tanpa garis, tetapi ruang akan dialokasikan untuknya. Hasil yang sama dapat dicapai dengan pengaturan<ТАВLЕ ВОRDER=0>. Terkadang Anda ingin membuat pinggirannya lebih tebal agar lebih menonjol. Untuk menarik perhatian pada gambar atau teks, Anda hanya dapat menetapkan batas tebal. Saat membuat tabel bertumpuk, Anda harus membuat batas dengan ketebalan berbeda untuk tabel berbeda agar lebih mudah dibedakan.

    Atribut CELLSPACING

    Atribut CELLSPACING menentukan lebar spasi antar sel dalam piksel. Jika atribut ini tidak ditentukan, nilai defaultnya adalah dua piksel. Dengan menggunakan atribut CELLSPACING=, Anda dapat menempatkan teks dan gambar di mana pun Anda membutuhkannya. Jika ingin menyisakan ruang kosong, Anda dapat menuliskan spasi pada sel tersebut.

    Teks atau data Teks atau data Teks atau data
    Teks atau data Teks atau data Teks atau data
    Teks atau data Teks atau data Teks atau data
    Teks atau data Teks atau data Teks atau data
    Teks atau data Teks atau data Teks atau data
    Teks atau data Teks atau data

    Atribut BGCOLOR

    Atribut ini memungkinkan Anda mengatur warna latar belakang. Bergantung pada tag mana (TABLE, TR, TD) yang digunakan, warna latar belakang dapat diatur untuk seluruh tabel, untuk satu baris, atau untuk sel individual. Nilai atribut ini adalah kode RGB atau nama warna standar.

    Teks atau data Teks atau data Teks atau data
    Teks atau data Teks atau data Teks atau data

    Atribut LATAR BELAKANG

    Atribut ini menentukan gambar latar belakang untuk tabel. Berlaku untuk tag TABLE dan TD. Nilainya adalah URL file gambar latar belakang. Penggunaan atribut ini dibahas di bawah.

    Menggunakan tabel dalam desain halaman

    Hal yang baik tentang tabel adalah Anda dapat membuat batasnya tidak terlihat jika Anda mau. Ini memungkinkan penggunaan tag<ТАВLЕ>menempatkan teks dan gambar dengan indah di halaman. Tanda selamat tinggal<ТАВLЕ>tetap menjadi satu-satunya alat pemformatan yang ampuh dalam HTML. Perancang halaman web sekarang memiliki kebebasan yang hampir sama mengenai penggunaan ruang putih seperti perancang halaman cetak. Tabel adalah cara terbaik untuk beralih dari penempatan teks hierarkis di halaman Web.

    Jika browser mendukung tabel, biasanya browser akan menampilkan dengan benar efek paling menarik yang diperoleh dengan menggunakan tabel tersebut

    Universitas Pedagogi Negeri Ural

    Selamat datang!

    Kursus pelatihan "Dasar-dasar penguasaan WEB"

    Membuat tabel warna-warni

    Beberapa browser mengizinkan Anda menampilkan warna. Ada beberapa cara untuk mewarnai tabel, sebagian besar bergantung pada browser yang Anda gunakan.

    Batas berwarna di Netscape Navigator. Anda tidak hanya dapat mengelilingi meja dengan batas yang indah, tetapi Anda juga dapat mengaturnya ke warna yang berbeda dari warna teks dan latar belakang. Buat GIF abu-abu sederhana (atau GIF apa pun yang ingin Anda jadikan latar belakang) dan tentukan dalam tag<ВODY>sebagai latar belakang halaman. Kemudian atur warna latar belakang halaman. Hasilnya, tag Anda<ВОDY>akan terlihat seperti ini:

    Anda telah membuat latar belakang ganda - GIF dan warna tertentu. Hasilnya, warna latar belakang akan terlihat pada seluruh batas tabel dan garis horizontal (<НR>). Apakah GIF latar belakang Anda berwarna abu-abu atau tidak, garis berwarna dan batas tabel akan terlihat jelas. Jika GIF latar belakang tidak terlalu rumit, waktu buka halaman hanya akan sedikit meningkat.