- CSS Inline
CSS
didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup
dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style
hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag
HTML yang lain.
Contoh :
<html>
<head>
<title>table dengan css in-line</title>
</head>
<body>
<table style="margin: auto;width: 80%; border-collapse:collapse;background: #ecf3eb">
<caption><h3> Contoh Tabel Dengan CSS </h3></caption>
<tr>
<th style="border: 1px solid #999;padding: 8x 0; background: #0cf;">
Header Kolom 1</th>
<th style="border: 1px solid #999;padding: 8x 0; background: #0cf;">
Header Kolom 2</th>
<th style="border: 1px solid #999;padding: 8x 0; background: #0cf;">
Header Kolom 3</th>
</tr>
<tr>
<td style="border: 1px solid #999; padding: 4px 8px;">Data Cell</td>
<td style="border: 1px solid #999; padding: 4px 8px;">Data Cell</td>
<td style="border: 1px solid #999; padding: 4px 8px;">Data Cell</td>
</tr>
<tr>
<td style="border: 1px solid #999; padding: 4px 8px;">Data Cell</td>
<td style="border: 1px solid #999; padding: 4px 8px;">Data Cell</td>
<td style="border: 1px solid #999; padding: 4px 8px;">Data Cell</td>
</tr>
</table>
</body>
</html>
- CSS Internal
Cara
membuat internal Style Sheet adalah dengan menambahkan tag <style type=”text/css”
media=”screen”> pada bagian header tag HTML kita. Setelah selesai
menambahkan tag maka selanjutnya tag tersebut kita tutup lagi dengan
</style>
Contoh :
<html>
<head>
<title>Tabel Dengan CSS Internal</title>
<style type="text/css">
table
{
margin: 0 auto;
width: 80%;
border-collapse: collapse;
background: #ecf3eb;
}
caption h3{
color: redl
}
th, td {
border:1px solid #999;
}
th {
padding: 8px 0;
background: #0cf;
}
td {
padding: 4px 8px;
}
</style>
</head>
<body>
<table>
<caption><h3>Contoh Tabel Dengan CSS</h3></caption>
<tr>
<th>Header Kolom 1</th>
<th>Header Kolom 2</th>
<th>Header Kolom 3</th>
</tr>
<tr>
<td>Data Cell</td>
<td>Data Cell</td>
<td>Data Cell</td>
</tr>
<tr>
<td>Data Cell</td>
<td>Data Cell</td>
<td>Data Cell</td>
</tr>
</table>
</body>
</html>
Belum ada tanggapan untuk "Penggunaan CSS Inline & Internal"
Post a Comment