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

Array pada JS - P13

Di pembahasan kali ini akan membahas JS Array..Langsung simak aja guys... 1. Pengertian Array 2. Jenis jenis Array 3. Contoh contoh Array 1. Pengertian Array     Array adalah tipe data yang berisi kumpulan dari nilai atau tipe data lain. Nilai di dalam array disebut dengan elemen, dan setiap elemen memiliki ‘nomor urut’ yang dikenal dengan istilah index. Penomoran index di dalam array dimulai dari angka 0, sehingga elemen pertama berada di index0, elemen kedua berada di index 1, dst.     Array di dalam JavaScript bersifat dinamis, dan kita tidak perlu mendefenisikan berapa ukuran array pada saat membuat variabel. Jumlah elemen dapat ditambah dan dikurang setiap saat. Index array di dalam JavaScript juga tidak harus berurutan, JavaScript membolehkan elemen dari array ‘tidak terur...
Post a Comment
Read more

Profil PHP - P19

PROFIL SAYA 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 50 51 52 <!DOCTYPE html> <html> <head> <title> DATA PRIBADI </title> <link rel="stylesheet" type="text/css" href="coba.css" > </head> <body> <section class="kotaknya" > <img src="FOTO.png" clas="image" width="300" height="450" /> </div> </section> <h1> Biografi pribadi </h1> <?php $nama_saya = "Muhamad Alfi Rizqi"; $kelas = "XI RPL 1"; $sekolah = "SMKN 4 Bandung"; $nis = "1718 117123"; $umur = "16 Tahun"; $berat_badan= "50 kg"; $hobi = "Bersepeda, Playing Games, mendaki"; $tinggi = "167 cm"; $alamat = ...
Post a Comment
Read more

Membuat Coding menjadi lebih bermakna dengan C++

Selamat beraktivitas dimanapun kalian berada... Kali ini saya akan menunjukan dengan Coding menjadi lebih bermakna untuk kalian semua... Misal dengan membuat Kalkulator simpel dengan C++ sangatlah mudah jika kalian ingin mempelajari ini terlebih dahulu.        Sebenarnya banyak bahasa pemrograman yang tentu saja memudahkan bagi kehidupan manusia,Contohnya Java,Phyton,C# dan masih banyak lagi Tapi,Saya akan menunjukan kepada kalian tentang bahasa program C++ dengan mencari tahu kalian tentu akan menjadi Programmer yang handal Dengan catatan ini adalah coding karya saya tentunya, Dan kalian hanya perlu memahami nya dan meniru nya dirumah.. saya hanya menunjukan berbagai cara saja dan sebenarnya C++ lebih dari ini.mungkin ini adalah Coding yang simple yang menurut kalian pasti hanya perlu waktu sebentar untuk memahaminya.. Sebelumya saya sudah menjelaskan di link saya tentang C++ dan tentunya dengan penjelasannya .Saya sarankan untuk membaca ARTIKEL ini...
Post a Comment
Read more