Skip to main content
Search
Search This Blog
PIECES STORY OF MY LIFE
Aku hanya ingin berbagi hal yang ada dihidupku dengan kalian semua :) I love to share
Home
More…
Share
Get link
Facebook
X
Pinterest
Email
Other Apps
November 10, 2017
COLSPAN DAN ROWSPAN TABLE MERGING MENGGUNAKAN HTML5 dan CSS3
TABLE MERGING IN HTML
COLSPAN = Menggabungkan colom /Merging Colom
Rowspan = Menggabungkan Baris
Colspan dan Rowspan Table in HTML
<!DOCTYPE html> <html> <head> <title>Tabel</title> <style type="text/css"> @font-face{ font-family: "KBAStitchInTime"; src: url('KBAStitchInTime.ttf') format('truetype'); } h1{ background-color:#ffffff; font-family: "KBAStitchInTime", Arial; color: #D23316; text-align: center; font-weight: bold; } body{ background-color: #F0B7C5; } table { text-align: center; border-color: #000000; background-color: #CC658D; width: 350px; } table tr, td{ border-color: #000000; } hr { color: #CC658D; } caption { font-family: Curlz MT; font-size: 25pt; } </style> </head> <body> <h1>Trying CSS3 and Table</h1> <table align="center" border="1" cellpadding="5" cellspacing="0"> <caption><img src="asset 2.png" width="50px">1. Latian Colspan </caption> <tr> <td>1,1</td> <td colspan="2"></td> <td>1,4</td> </tr> <tr> <td>2,1</td> <td>2,2</td> <td>2,3</td> <td>2,4</td> </tr> </table> <hr> <p class="two"> <table align="center" border="1" cellpadding="5" cellspacing="0"> <caption>2. Latian Rowspan <img src="asset 3.png" width="100px"> </caption> <tr> <td rowspan="2"></td> <td>1,2</td> <td>1,2</td> <td>1,4</td> </tr> <tr> <td>2,2</td> <td>2,3</td> <td>2,4</td> </tr> </table> <hr> <table align="center" border="1" cellpadding="5" cellspacing="0"> <caption><img src="asset 1.png" width="50px">Latian Gabungan Colspan dan Rowspan</caption> <tr> <td>1,1</td> <td>1,2</td> <td>1,3</td> <td>1,4</td> </tr> <tr> <td>2,1</td> <td colspan="2" rowspan="2" ></td> <td>2,4</td> </tr> <tr> <td>3,1</td> <td>3,4</td> </tr> <tr> <td>4,1</td> <td>4,2</td> <td>4,3</td> <td>4,4</td> </tr> </table> <hr> </body> </html>
Preview
Clear
span>
Comments
Popular Posts
November 19, 2017
Program Javascript: menampilkan segitiga menggunakan perulangan FOR
November 03, 2017
Membuat Form Sederhana Menggunakan HTML5
Comments
Post a Comment