Tutorial cara nak buat bahagian tepi table jadi bulat (round) tanpa guna image..

Posted: May 29, 2011 in CSS

ok kita tengok pada tajuk pun kita dah tahu apa tujuan tutorial ini kan?..dan ini contoh gambaran bagaiman round table yang aku maksudkan itu…


Langkah2 dia sperti ini :

software yang digunakan

  • Dreamweaver atau perisian lain-lain pun boleh di mana ianya digunakan untuk membina website.

Hardware

  • Dah tentu lah kena ada komputer, takkan nak guna mesin basuh pulak ye x?..hehe

Bahasa Programming

  • HTML,CSS

 

ok sekarang ni senang je.. aku bagi korang kod CSS dan HTML yang dh siap..n then pastekan je pada perisian web design .. buat satu fail index.html dan pastekan html ini :


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>
<link href=”style2.css” rel=”stylesheet” type=”text/css” />

</head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Round Table Tutorial</title>
<body>

<table width=”399″ height=”169″ align=”center”>
<tr>
<td>&nbsp;</td>
</tr>
</table>

<br /><br />
<table width=”399″ height=”169″ align=”center”>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<br /><br />
<table width=”399″ height=”169″ align=”center”>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<br /><br />
<table width=”399″ height=”169″ align=”center”>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<br /><br />
</body>
</html>


Lepas tu korang bukak satu fail css pulak dan pastekan kod ini di dalam fail css itu dengan nama style.css. Ini kod CSS dia..


@charset “utf-8″;
/* CSS Document */

.tableround {
background: #CCCCFF;
border:0px;
width: 70%;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

}

.tableround1 {
background: #666600;
border:0px;
width: 70%;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

}
.tableround2 {
background: #336633;
border:0px;
width: 70%;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

}

.tableround3 {
background: #333366;
border:0px;
width: 70%;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

}


P/s = yang membuatkan bahagian tepi table jadi corner adalah sebab saya guna -moz-border-radius: 25px; dan -webkit-border-radius: 25px; so kalau nk lebihkan round corner dia tambah je nilai pada 25px tu kepada ++px.

lepastu… korang uji dengan bukak fail index.html tadi pada mozilla firefox korang… dan… tadaaa.. dh siap dah round corner table korang… so… apa lagi.. ubahlah mengikut citarasa korang nak letak kaler trafic light pon boleyyy…sekian

About these ads
Comments
  1. Suraya says:

    OO..macam ni ke… ingatkan kena guna image pastu edit pakai photoshop bagi yg tepi tu jadi bulat..hehe… skrg ni senang la..juga guna radius tu je kan?..ihihi… best2… thanks rzxblog..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s