KhassifaELek Go-Blog: Membuat Tabel dengan css

Pada bahasan sebelumnya kita membuat tabel melalui cara manual, yaitu dengan mengetikan sintaknya, nah... kali ini kita akan belajar membuat tabel dengan CASCADING STYLE SHEET atau yg lebih populer disebut css, adapun deskripsi dari css yaitu,
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.
Rekomendasi CSS menguraikan tiga jenis style:

Embedded : properti style diletakkan di dalam satu blok di dokumen HTML.
Inline : properti style diterapkan secara langsung per baris atau per elemen HTML.
Linked : properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.

Selain mengulas tentang pemanfaatan CSS, bagian ini juga menekankan pada pembuatan desain dengan menggunakan division. Bagaimanapun, untuk menghasilkan desain halaman web yang baik, penggunaan tabel tidak disarankan dan sebagai gantinya adalah dengan memanfaatkan division.
Contoh pemanfaatan css:
Dalam contoh ini kita akan belajar mengimplementasikan ccs.
contohnya seperti tabel layout dari wab di bawah ini
Supaya menghasilkan seperti tabel tersebut langkah pertama tuliskan script berikut pada note pad dan simpan dengan format . html
adapun source codenya...

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Format Layout Sederhana</title>
<link rel="stylesheet" href="FormatStyle.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="top">
Top
</div>
<div id="content">Content
</div>
<div id="right">
Right
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>

Langkah kedua setelah kita menuliskan kode tersebut buat kerangka atau link yang nantinya dapat terhubung dengan kode program di atas dan simpan dengan namafile.css

#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;}
#header {
height: 85px;
border: 1px solid blue;}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;}
#sidebar {
float: left;
margin-right: 20px;
width: 200px;
height: 357px;
border: 1px solid red;}#top {
float: left;
width: 524px;
height: 120px;
border: 1px solid red;}
#content {
float: left;
margin-right: 20px;
width: 275px;
height: 235px;
border: 1px solid green;}
#right {
float: right;
width: 227px;
height: 180px;
border: 1px solid red;}
#footer {
clear: both;
height: 75px;
border: 1px solid blue;}

dari pembuatan tabel di atas kita bisa mengembangkannya dengan mengganti background ataupun menambah foto,melink-kan,dan lain2 seperti pada gambar di bawah ini

adapun sourcodenya html dan cssnya adalah sebagai beikut...

==>sourcecode html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="NoviStyle.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<div id = "box1">
<img src="logo um.gif">
</div>
<div id="logo">
<img src="logo um.jpg" width="50"/>
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</h2>
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
<div id = "box2">
<a href="LinkEmail.html"> <font color="black">FTE</a></p>
</div>
<div id = "box3">
<a href="LinkBalik.html"><font color="black">Profile</a></p>
</div>
<div id = "box4">
<a href="LinkHome.html"><font color="black">Home</a></p>
</div>
</div>

<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
</ul>
</div>
</div>
<div id="top">
<div id = "box8">
<img src="2.jpg">
</div>
<div id = "box9">
<img src="3.jpg">
</div>
</div>
<div id="content">
<b>Himpunan Mahasiswa Elektro<br/></b>
<br/>
A. Visi <br/>
Sebagai wadah pengembangan dan pembinaan kemahasiswaan diprioritaskan untuk meningkatkan kompetensi dalam bidang penalaran/keilmuan, minat
dan kegemaran mahasiswa, kesejahteraan mahasiswa, kepedulian sosial kemasyarakatan, serta organisasi kemahasiswaan di lingkup jurusan teknik elektro<br/>

<br/>
Read more......</br>

</div>
<div id="right">
<b>Event :</b>
<ul>
<li><a href="#">Seminar Nasional Teknologi</a></li>
<li><a href="#">Pelatihan Karya Tulis Ilmiah</a></li>
<li><a href="#">Kajur Cup Elektro</a></li>
<li><a href="#">Gelar Sains Elektro (GENIE)</a></li>
</div>
</div>
<div id="footer">
<h3 align="center"><b>© HIMPUNAN MAHASISWA ELEKTRO FAKULTAS TEKNIK UM.</b></h3>
</div>
</div>
</body>
</html>

==>sourcecode css

#wrapper {
margin: auto;
width: 1000px;
border: 1px solid white;
}
#header {
height: 100px;
background: #99CC00;
border: 1px solid white;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid white;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
background: #CCFF99;
border: 1px solid white;
}

#top {
float: left;
width: 813px;
height: 135px;
background: #FFFFCC;
border: 1px solid white;
}

#content {
float: left;
margin-right: 5px;
width: 450px;
height: 240px;
background: #FFFFCC;
border: 1px solid white;
text-align:justify;
}

#right {
float: right;
width: 357px;
height: 165px;
background: #CCFF99;
border: 1px solid white;
}

#footer {
clear:both;
height: 50px;
background: #6cae15;
border: 1px solid white;
}

#leftmenu ul {
width: 175px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #5e9711 no-repeat left center; color: #ffffff
}

#box1 {
float: left;
margin-right:10px;
width: 91px;
height: 98px;
background: #FFFFFF;
border: 1px solid white;
}

#box2{
float: right;
margin-right: 20px;
margin-top: 7px;
width: 60px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}

#box3{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 35px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}

#box4{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 32px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}

#site-title h2{ float:left; padding:0px 10px; height:30px; margin:20px 0px; font:2.1em/100% 'Verdana'; font-weight: bold;}
#search { clear:right; float:right; margin:20px 50px 0px auto; height:30px; font-weight:bold;}

#box6{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 50px;
height: 20px;
background: #99CC00;
border: 1px solid #99CC00;
}

#box7 {
float: left;
margin-right: 5px;
margin-top: 2px;
width: 490px;
height: 85px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box8 {
float: left;
margin-right: 3px;
margin-top: 5px;
width: 406px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box9 {
float: left;
margin-right: 0px;
margin-top: 5px;
width: 400px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}

Selamat mencoba...^_^

2 komentar:

Fahro mengatakan...: Thanks info'y, sy msh baru dlm mempelajari CSS nih, smoga artikel ini mmbantu sy lhb mahir lg.

Salam kenal, kunjungi blog sy jga ya => http://www.ukafahrurosid.com; 11 April 2011 pukul 13.20
Surya Fajriyansyah mengatakan...: aku udah follow blog ini. tolong follback ya.. ;;); 1 Agustus 2012 pukul 08.23