Cara Membuat Tabel Dengan fungsi scroll
kali ini saya akan memberikan sedikit trick untuk membuat tabel dgn fungsi scroll,
jadi sobat teks tulisan kita yang banyak kata-katanya bisa bisa di jadikan scroll, ini manfaat banyak di antaranya: untuk teks tutorial dsb.
oke langsung saja.
<div style="border: 1px solid #aaa; color: white; height: 250px; overflow: auto; r: #f9efef; width: 450px;">ISI ARTIKEL</div>
kali ini saya akan memberikan sedikit trick untuk membuat tabel dgn fungsi scroll,
jadi sobat teks tulisan kita yang banyak kata-katanya bisa bisa di jadikan scroll, ini manfaat banyak di antaranya: untuk teks tutorial dsb.
oke langsung saja.
- pertama sobat masuk dulu ke blog sobat
- kmudian sobat menulis sbuah teks.
setelah sobat menulis artikel kemudian sobat ingin memberikan sebuah tabel, ya intinya supaya enak di pandang and simple.
kemudian sobat pilih tobol HTML trus masukan kode di bawah ini.
==========================Tabel 1===========================
artikel yang ingin sobat masukan ke dalam tabel
</div>
============================Tabel 2===========================
Atau yang lebih Bagusnya lagi dan otmatis bisa di perbesar atau di perkecil labelnya ini kodenya
<textarea cols="52" name="txt" onclick="this.focus();this.select()" onfocus="this.select()" onmouseover="this.focus()" rows="3" style="display: inline; height: 100px; margin: 2px; width: 450px;">DISINII UNTUK ARTIKEL</textarea>
=============================Tabel 3==========================
<center>
<div class="textareatombol">
<form name="formtombol1">
<textarea cols="50" name="textarea" rows="3" style="margin: 2px; width: 423px; height: 102px;">Di SINI UNTUK ARTIKEL</textarea></form>
</div>
</center>
=============================Tabel 4==========================
<div align="center">
<table border="1" style="width: 250px;">
<tbody>
<tr> <th bgcolor="#000000" colspan="100%" scope="col">DI SINI UNTUK JUDUL</th> </tr>
<tr><td><div style="background: #000000; border-color: #000000; font-family: arial; font-size: 12px; height: 250px; overflow: scroll; width: 250px;">
<div style="background: #000000; color: white; overflow: hidden; padding: 0 px; text-align: left; width: 100%;">
ISI ARTIKEL
</div>
</div>
</td></tr>
</tbody></table>
</div>
Atau yang lebih Bagusnya lagi dan otmatis bisa di perbesar atau di perkecil labelnya ini kodenya
<textarea cols="52" name="txt" onclick="this.focus();this.select()" onfocus="this.select()" onmouseover="this.focus()" rows="3" style="display: inline; height: 100px; margin: 2px; width: 450px;">DISINII UNTUK ARTIKEL</textarea>
=============================Tabel 3==========================
<center>
<div class="textareatombol">
<form name="formtombol1">
<textarea cols="50" name="textarea" rows="3" style="margin: 2px; width: 423px; height: 102px;">Di SINI UNTUK ARTIKEL</textarea></form>
</div>
</center>
=============================Tabel 4==========================
<div align="center">
<table border="1" style="width: 250px;">
<tbody>
<tr> <th bgcolor="#000000" colspan="100%" scope="col">DI SINI UNTUK JUDUL</th> </tr>
<tr><td><div style="background: #000000; border-color: #000000; font-family: arial; font-size: 12px; height: 250px; overflow: scroll; width: 250px;">
<div style="background: #000000; color: white; overflow: hidden; padding: 0 px; text-align: left; width: 100%;">
ISI ARTIKEL
</div>
</div>
</td></tr>
</tbody></table>
</div>
Sekian dulu postingan kali ini semoga bermanfaat dan berhasil.
0 komentar:
Posting Komentar