Tutorial membuat tabel rowspan dan colspan menngunakan HTML

-

Fungsi Atribut Rowspan and Colspan

Atribut rowspan and colspan digunakan untuk membuat sel tabel ‘bersatu’ dengan sel yang lain. Atribut ini diletakkan pada tag td dari sebuah tabel. Agar mudah memahami, langsung saja kita buat contoh kode HTMLnya.


Pertama tama sebelum memulai kalian harus membuka teks editor kalian.
contohnya Visual Studio dan Sublime text

1. Pertama kalian membuat file html terlebih dahulu


2. Setelah itu Ketik Codingan Seperti Ini !!
<!DOCTYPE html>
<html>
    <head>
        <title>Praktek Dasar html</title>
        <style type="text/css">
        table,th, td{
            border: 2px solid black;
            border-collaps: collapse; }
            table{ width: 30%}
            th, td{text-align:center;}
        </style>
        </head>

Codingan di  atas di gunakan untuk bagian kepala kepala 
Heading atau lebih tepatnya TAG Heading merupakan TAG khusus yang disediakan oleh HTML untuk membuat sebuah judul pada teks dalam sebuah halaman web. TAG Heading secara default ditampilkan oleh browser dengan ukuran lebih besar dan lebih tebal (bold) dari teks biasa


2.Setelah membuat Bagian Kepala lalu ke Badan
<body>
            <table>
                <tr>
                <th rowspan="2">no</th>
                <th rowspan="2">NIM</th>
                <th rowspan="2">Nama</th>
                <th colspan="3">Absensi</th>
                </tr>
                <tr>
               <td>Hadir</td>
               <td>sakit</td>
               <td>ijin</td>
               </tr>
             
               <tr>
               <td>1</td>
               <td>202120965</td>
               <td>udin petot</td>
               <td>30</td>
               <td>0</td>
               <td>0</td>
               
            </tr>
               <td>2</td>
               <td>2021207869</td>
               <td>Ahmad ambatukam</td>
               <td>25</td>
               <td>4</td>
               <td>1</td>
               </tr>
               
               <tr>
                <td>3</td>
                <td>2021235467</td>
                <td>Rehan wangsaf</td>
                <td>20</td>
                <td>5</td>
                <td>5</td>
               </tr>

               <tr>
                <td>4</td>
                <td>20212234576</td>
                <td>Udin Petot</td>
                <td>29</td>
                <td>1</td>
                <td>0</td>
               </tr>

               <tr>
                <td>5</td>
                <td>2021134235</td>
                <td>Pedo</td>
                <td>28</td>
                <td>2</td>
                <td>0</td>
               </tr>

               </table>
               </body>
               </html>

</html>

codingan di atas untuk bagian badan 
kita dapat melihat bahwa tag td yang memiliki atribut colspan, akan membuat sel tabel bersatu dengan kolom disebelahnya. Sedangkan atribut rowspan akan membuat sel tabel bersatu dengan baris dibawahnya. Kedua atribut ini membutuhkan nilai (value), dimana nilai ini adalah seberapa banyak sel tabel yang dibuat ‘bersatu’.



3. ouput dari codingan di atas


Dalam membuat tabel dengan atribut rowspan dan clospan, anda sebaiknya telah mengkalkulasi seberapa besar tabel yang akan dibuat, karena dengan semakin kompleks tabel, akan semakin rumit untuk menggabungkan beberapa sel tabel tersebut.




Begitu saja Tutorial dari saya semoga bermanfaat     😆😆  !!!








Komentar

Posting Komentar

Postingan populer dari blog ini

Soal aplikasi server dan programan server side scripting

-
 A.  1. Halaman web dapat dikategorikan menjadi web statis dan dinamis  2. Fungsi utama dari web server untuk menyimpan, mengolah, dan menyampaikan suatu informasi berupa halaman web kepada client 3. Localhost adalah sebutan bagi server lokal yang ada di komputer user  4.    www.apachefriends.org  adalah situs resmi dari XAMPP 5. Appserv memiliki fungsi untuk menginstal beberapa program dengan waktu singkat, yaitu Apache, PHP, dan MySQL 6. Windows 7 bisa langsung menggunakan IIS dengan menginstal net framework  7. Personal home page nama PHP pertama kali dibuat pada tahun 1995 8. Coldfusion pertama kali dikembangkan Allaire Corporation 9.  Personal web bukan termasuk web container 10. PHP adalah salah satu program aplikasi server side programming yang banyak digunakan  11. Panjang sangat terbatas tidak termasuk aturan penulisan variabel pada PHP  12. Example operator tidak termasuk jenis-jenis operator  13. Komentar merupakan b...
Baca selengkapnya

PHP part 4 Operator

-
Gambar
 Pengertian Operator Pengertian operator pada php  adalah simbol yang digunakan untuk membuat instruksi atau memanipulasi data terhadap suatu nilai asal sehingga akan memberikan nilai hasil atas prose operasi.  Operand  adalah nilai asal yang digunakan didalam proses operasi, dalam bahasa pemrograman, operand php dapat didefinisikan ke dalam variabel atau konstanta. Dibawah ini adalah tabel daftar  urutan prioritas operator  pada php, dimana operator paling atas lebih diprioritaskan dari pada operator dibawahnya. Kemudian operator yang berada pada baris yang sama memiliki urutan prioritas yang sama. Jenis Operator Berdasarkan Jumlah Operand Berdasarkan jumlah operand, operator php dapat dibedakan menjadi 3 jenis yaitu operator unary, operator binary dan operator ternary. 1). Operator unary  adalah operator yang hanya memiliki 1 operand, misalnya simbol tanda minus (-). Tanda minus digunakan untuk membuat sebuah angka menjadi negatif, contohnya: -7, ata...
Baca selengkapnya

Membuat web E - Ticketing Peswat

-
Gambar
 1. Membuat database Tabel Flight Tabel Orders Tabel User Lanjut ke codinganya Connect <?php error_reporting ( E_ALL ); ini_set ( "display_errors" , 1 ); class Libcore {     public $pdo = null ;     /**      * Melakukan koneksi ke database      */     function connect ()     {         // Database credentials         $host = 'localhost' ; // your database host         $username = 'root' ; // your database username         $password = '' ; // your database password         $database = 'tugas_udintiket' ; // your database name         try {             $this -> pdo = new PDO ( "mysql:host= $host ;dbname= $database " , $username , $password );         } catch ( PDOException $e ) {             die...
Baca selengkapnya