Memberi Warna pada Table menggunakan HTML
Suatu tampilan table akan terlihat kaku,tidak enak di pandang mata dan terlihat formal apabila tidak disertai dengan warna pada setiap kolom dan barisnya. Tentunya saja untuk menampilkan data dalam table terlihat menarik dan mudah di baca, maka table tersebut perlu diberikan warna. Lalu bagaimana cara mewarnai table tersebut. Nah, dalam tutorial kali ini saya akan coba membahas Cara Memberi Warna pada Tabel menggunakan HTML.
Baiklah langsung saja
kita mulai :
1. Langkah
Pertama, Silahkan buka dulu Notepad++ atau Sublime Text.
2. Jika
sudah,buka Programnya dan ketikkan kode dibawah ini :
<html>
<body>
<title> Tugas table
</title>
<style>
th {background-color :blue;
color: black;}
table {margin : auto;}
.hijau {background: green; color:
black;}
.kuning {background: yellow;
color: black;}
.ungu {background: purple; color:
black;}
.merah {background: red; color:
black;}
.pink {background: pink; color:
black;}
.hitam {background: black; color:
white;}
.orange {background: orange;
color: black;}
.putih {background: white;}
</style>
<table
border="1">
<tr>
<th>1</th>
<th>2 </th>
<th colspan="2"
rowspan="2" class="hijau"> hijau</th>
<th colspan="2"
rowspan="3" class="kuning"> kuning</th>
<th>50</th>
<th>51</th>
<th>52</th>
<th>53 </th>
<th>54</th>
<th>55</th></tr>
<tr>
<th>3</th>
<th>4</th>
<th>61</th>
<th>60</th>
<th>54</th>
<th>58</th>
<th>57</th>
<th>56</th></tr>
<tr>
<th>5</th>
<th>6</th>
<th>15</th>
<th>16</th>
<th rowspan="2"
colspan="2" class="ungu"> ungu</th>
<th>62</th>
<th rowspan="2"
colspan="3" class="merah"> merah</th></tr>
<tr>
<th> 7 </th>
<th rowspan="3"
colspan="1" class="merah"> merah</th>
<th>17</th>
<th>18</th>
<th>24</th>
<th>25</th>
<th>62</th></tr>
<tr>
<th>8</th>
<th rowspan="3"
colspan="2" class="orange"> orange</th>
<th>26</th>
<th>27</th>
<th>28</th>
<th rowspan="2"
colspan="2" class="kuning"> kuning</th>
<th>64</th>
<th>65</th>
<th>66</th></tr>
<tr>
<th>9</th>
<th>29</th>
<th>30</th>
<th>31</th>
<th rowspan="3"
colspan="3" class="pink"> pink</th></tr>
<tr>
<th>10</th>
<th>11</th>
<th>32</th>
<th
rowspan="2" colspan="3" class="merah">
merah</th>
<th>44</th></tr>
<tr>
<th
rowspan="2" colspan="3"
class="hitam">hitam</th>
<th>19</th>
<th
rowspan="3" colspan="" class="putih"></th>
<th>45</th></tr>
<tr>
<th>20</th>
<th>33</th>
<th>34</th>
<th>45</th>
<th>46</th>
<th>67</th>
<th>68</th>
<th>69</th></tr>
<tr>
<th>12</th>
<th colspan="2"
rowspan="3" class="orange"> orange</th>
<th>21</th>
<th>35</th>
<th>36</th>
<th>42</th>
<th>47</th>
<th>70</th>
<th>71</th>
<th>72</th></tr>
<tr>
<th>13</th>
<th>22</th>
<th
colspan="3" rowspan="1" class="merah">
merah</th>
<th>41</th>
<th>48</th>
<th
colspan="3" rowspan="2" class="hijau">
hijau</th></tr>
<tr>
<th>14</th>
<th>23</th>
<th>37</th>
<th>38</th>
<th>39</th>
<th>40</th>
<th>49</th></tr>
</table>
</body>
</html>
3. Jika sudah
langsung di Save As..., dengan format pemyimpanan Hyper Text Markup Langueage(HTML).
Jika sudah di save, buka filenya di Web Browser seperti Explorer, Firefox,
Google Chrome dan sebagainya.
4.
Terimakasih telah berkunjung ke Blogg ini.
Komentar
Posting Komentar