Skip to main content

Pembuatan Tabel - P5

Membuat Tabel

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table pada HTML, digunakan Tag<Table>.
Elemen table berisi property <tr> untuk menentukan baris(table row) yang didalamnya terdapat properti <td> untuk menampkan data pada setiap sel table (table data).

Atribut Elemen Tabel

-Width       :Panjang(lebar table,pixel atau persen)

-Height      :Panjang(Tinggi Table,pixel atau persen)

-Border      :pixel(tebal garis tepi)

-Cellspacing:pixel(spasi antar cell)

-Cellpading:pixel(spasi di dalam sel)

-Align          :[left|center|right](perataan Table)

-Bgcolor      :Warna(Warna latar belakang Table)

Atribut Table Row

-Align :[left|center|right](peralatan sebaris sel secara Horizontal)

-Valign :[top|middle|bottom](peralatan sebaris sel secara Vertikal)

-Bgcolor:Warna(warna latar belakang baris)


Inilah beberapa Contoh untuk Tabel:

1. Lat12 Tabel


Dan Inilah hasilnya:
s

Source Codenya:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <table width="80%" border="2" cellpadding="0" cellspacing="0">
  <tr>
   <td bgcolor="red">Baris 1 kolom 1</td>
   <td bgcolor="yellow">Baris 1 kolom 2</td>
  </tr>
  <tr>
   <td colspan="2">Baris 2 kolom 1</td>
  </tr>
  <tr>
   <td rowspan="2">Baris 3 kolom 1</td>
   <td>Baris 3 Kolom 2</td>
  </tr>
 </table>
 <ol>
  <li>Cara Membuat Tabel</li>
  <ul>
   <li>Lat12abel</li>
   <li>Lat13tabel</li>
   <li>Lat14tabel</li>
   <li>Lat15tabel</li>
   <li>Lat16tabel</li>
   <li>Lat17tabelTanah</li>
   <li>Lat18tabelTanah</li>
   <li>Lat19tabelBenua</li>
   <li>Lat20tabelBenua</li>
   <li>Lat21tabelBuah</li>
  </ul>
 </ol>
</body>
</html>

2. Lat13 Tabel 1


Hasilnya:
Source Code:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 <!DOCTYPE html>
 <html>
 <head>
  <title></title>
 </head>
 <body>
  <table width="80%" border="2" cellpadding="0" cellspacing="0">
   <tr>
    <td bgcolor="red">Baris 1 kolom 1</td>
    <td bgcolor="yellow">Baris 1 kolom 2</td>
   </tr>
   <tr>
    <td colspan="2">Baris 2 kolom 1</td>
   </tr>
   <tr>
    <td rowspan="2">Baris 3 kolom 1</td>
    <td>Baris 3 Kolom 2</td>
   </tr>
  </table>
 </body>
 </html>

3. Lat13 Tabel 2

Hasilnya:
Source Code:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <table border="2">
  <caption>Daftar wiraniaga</caption>
  <tr>
   <th colspan="2" rowspan="2">Wiraniaga</th>
   <th colspan="3">kota</th>
  </tr>
  <tr>
   <th>Pati</th>
   <th>Kudus</th>
   <th>Solo</th>
  <tr>
  <tr>
   <th rowspan="2">Jenis Kelamin</th>
   <th>Pria</th>
   <td align="right">30 orang</td>
   <td align="right">30 orang</td>
   <td align="right">30 orang</td>
  </tr> 
  <tr>
   <th>Wanita</th>
   <td align="right">30 orang</td>
   <td align="right">30 orang</td>
   <td align="right">30 orang</td>
  </tr>
  </tr>
  </tr>

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

4. Lat14 Tabel

 Hasilnya:

Source Codenya:



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <table border="1" width="50%" >
  <tr>
   <th>Nama</th>
   <th>Usia</th>
  </tr>
  <tr>
   <td>Ali</td>
   <td>25</td>
  </tr>
  <tr>
   <td>Fahmianto</td>
   <td>27</td>
  </tr>
 </table>
</body>
</html>

5. Lat15 Tabel

Hasilnya:

Source Codenya:
Nama Usia
Ali 25
Fahmianto 27 



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <table border="1" width="50%" >
  <tr>
   <th>Nama</th>
   <th>Usia</th>
  </tr>
  <tr>
   <td>Ali</td>
   <td>25</td>
  </tr>
  <tr>
   <td>Fahmianto</td>
   <td>27</td>
  </tr>
 </table>
</body>
</html>

6. Lat16 Tabel

Hasilnya:

Source Codenya:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <table border="1">
  <tr align="center">
   <th rowspan="2" bgcolor="pink">No</th>
   <th rowspan="2" bgcolor="cyan">Nama</th>
   <th colspan="5" bgcolor="green">Pertemuan</th>
  </tr>
  <tr align="center" bgcolor="cyan">
   <th>1</th>
   <th>2</th>
   <th>3</th>
   <th>4</th>
   <th>5</th>
  </tr>
  <tr align="center">
   <td>1</td>
   <td>Neymar</td>
   <td>Check</td>
   <td>Check</td>
   <td>Check</td>
   <td>Check</td>
   <td>s</td>
  </tr>
  <tr align="center">
   <td>2</td>
   <td>Cristiano</td>
   <td>a</td>
   <td>check</td>
   <td>i</td>
   <td>s</td>
   <td>check</td>
  </tr>
  <tr align="center">
   <td>3</td>
   <td>Bale</td>
   <td>a</td>
   <td>check</td>
   <td>check</td>
   <td>check</td>
   <td>check</td>
  </tr>
 </table>
</body>
</html>

7. Lat17 Tabel tanah

Hasilnya:

Source Codenya:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <table width="500" border="1">
  <tr>
   <th scope="col">Nama Perusahaan</th>
   <th scope="col">Tipe / Luas tanah
   (m<sup>2</sup>)</th>
  </tr>
  <tr>
   <td rowspan="4">Griya Indah Permai</td>
   <td>21 / 60</td>
  </tr>
  <tr>
   <td>36 / 90</td>
  </tr>
  <tr>
   <td>45 / 120</td>
  </tr>
  <tr>
   <td>54 / 120</td>
  </tr>
 </table>
</body>
</html>


8. Lat18 Tabel tanah

Hasilnya:

Source Codenya:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <table border="1" width="500">
  <tr>
   <th scope="col">perumahan</th>
   <th colspan="4" scope="col">Tipe / Luas
   tanah (m<sup>2</sup>)</th>
  </tr>
  <tr>
   <td>Griya Permai Indah</td>
   <td>21/60</td>
   <td>36/90</td>
   <td>45/120</td>
   <td>54/120</td>
  </tr>
 </table>
</body>
</html>

9. Lat19 Tabel Benua

Hasilnya:

Source Codenya:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style type="text/css">
  table
  {
   border-width: 1px;
   border-collapse: collapse;
   border-color: #000; 
  }
 </style>
</head>
<body>
 <table border="1" width="500" cellpadding="10">
  <tr>
   <th>Benua</th>
   <th>Negara</th>
  </tr>
  <tr>
   <td rowspan="4">Asia</td>
   <td>Arab Saudi</td>
  </tr>
  <tr>
   <td>India</td>
   <tr>
    <td>Indonesia</td>
    <tr>
     <td>Singapura</td>
    </tr>
   </tr>
  </tr>
  <tr>
   <td rowspan="4">Eropa</td>
   <td>Belanda</td>
   <tr>
    <td>Italia</td>
   </tr>
   <tr>
    <td>Jerman</td>
   </tr>
   <tr>
    <td>Inggris</td>
   </tr>
  </tr>
 </table>
</body>
</html>

10. Lat20 Tabel Benua

Hasilnya:

Source Codenya:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style type="text/css">
  table
  {
   border-width: 1px;
   border-collapse: collapse;
   border-color: #000; 
  }
 </style>
</head>
<body>
 <table border="1" width="500" cellpadding="10">
  <tr>
   <th>Benua</th>
   <th>Negara</th>
  </tr>
  <tr>
   <td rowspan="4">Asia</td>
   <td>Arab Saudi</td>
  </tr>
  <tr>
   <td>India</td>
   <tr>
    <td>Indonesia</td>
    <tr>
     <td>Singapura</td>
    </tr>
   </tr>
  </tr>
  <tr>
   <td rowspan="4">Eropa</td>
   <td>Belanda</td>
   <tr>
    <td>Italia</td>
   </tr>
   <tr>
    <td>Jerman</td>
   </tr>
   <tr>
    <td>Inggris</td>
   </tr>
  </tr>
 </table>
</body>
</html>

11. Lat21 Tabel Buah
Hasilnya:

Source Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style type="text/css">
  table{
   font-family: verdana, arial, sans-serif;
        color: #333333;
        border-width: 1px;
        border-color: #3A3A3A;
        border-collapse: collapse;
  }
 </style>
</head>
<body>
 <table width="500" border="1" cellpadding="10">
  <tr>
   <td>Apel</td>
   <td rowspan="2">Jeruk</td>
   <td>Mangga</td>
  </tr>
  <tr>
   <td>Pisang</td>
   <td>Nanas</td>
  </tr>
  <tr>
   <td>Leci</td>
   <td></td>
   <td></td>
  </tr>
 </table>
</body>
</html>



Comments

Post a Comment

Popular posts from this blog

Algoritma C++ Konversi dan Menukar Bilangan dari User

MENJADIKAN CODING C++ BERMANFAAT UNTUK USER Selamat beraktivitas bagi pembaca sekalian dimanapun kalian berada.. Kali ini saya akan menunjukan kepada kalian coding sederhana dengan C++ sesuai dengan judulnya  Yang saya bahas kali ini adalah  -PERTUKARAN NILAI MENGGUNAKAN VARIABEL BANTU -PERTUKARAN NILAI TANPA MENGGUNAKAN VARIABEL BANTU -BILANGAN POSITIF & NEGATIF dan -KONVERSI WAKTU DARI DETIK KE JAM, MENIT, dan DETIK Langsung saja ke pembahasan di bawah ini. 1. PERTUKARAN NILAI MENGGUNAKAN VARIABEL BANTU -Kita menginisialisasikan terlebih dahulu variabelnya x, y, z dengan tipe data Integer sebenarnya variabel z hanya variabel pembantu saja -Lalu untuk pengulangannya saya memakai do while  dengan menginisialisasikan pilih dengan tipe data char -Lalu pengulangannya saya tulis do{ -Saya outputkan dengan  cout << "Masukan Nilai X : " ; dan input dengan cin >> a ; -Untuk proses saya masukan z = x ; x = y ; y = z ; ...
Post a Comment
Read more

Program C++ menentukan Bilangan Ganjil Genap,terbesar,terkecil serta berat badan Ideal

Program C++ Menentukan Bilangan Ganjil Genap,Terbesar serta terkecil & Program Berat Badan Ideal beserta Source Codenya Dengan Program menentukan Bilangan kita tentu perlu suatu saat bila kita menggunakannya sekaligus mempelajari Program C++ dan memahami lebih dalam Program C++ Semoga artikel ini membantu bagi anda sekalian.Langsung saja dengan mengwali Menentukan Bilangan Ganjil Genap dan diakhiri dengan program Berat Badan Ideal, 1. Menentukan Bilangan Ganjil Genap SubJudul yang pertama adalah menentukan Bilangan Ganjil Genap beserta Source Code Pertama kita inisialisasikan dulu variabel yang akan dipakai yaitu a dengan tipe data integer  - Untuk variabel pengulangannya saya pakai pilih dengan tipe data char - Saya menggunakan pengulangan do while jadi kita tulis do{ - Kemudian output nya kita tulis cout << "Masukan angka: " ; dan input nya kita              tulis cin >...
Post a Comment
Read more

Komponen Audio,Video & Flash - P7

Menyediakan komponen, Audio, Video & Flash Format Tampilan Video Kita dapat menampilkan format audio pada halaman web, untuk menampilkannya dapat digunakan format seperti ini  Hasilnya: Source Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> <title> cek video </title> </head> <body> <video width= "999" height= "540" controls poster= "gambarku/cute-030.jpg" > <source src= "This Is Me.mkv" type= "video/mp4" > browser anda tidak mendukung format video ini </video> </body> </html> Format Tampilan Audio  Hasilnya: Format Tampilan Flash 1 2 3 4 5 6 7 8 <html> <head> <title> Animasi </title> </head> <body> <embed src= "media/Strong.swf" > </body> </html> Hasilnya: Aud...
4 comments
Read more