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
Twitter
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