Web tasarımında tabloların yeri eskiden çok önemliydi. Günümüzde artık sadece kayıtları listelemek için kullanılmakta. Günlük yaşamda tuttuğumuz listeleri, excel kayıtlarındaki satır sütünları HTML içinde tablolarda gösteririz. Bu yazıda CSS Tablo şekillendirme (CSS tablo Biçimlendirme) ile ilgili iki tane örnek ve kodlarını paylaşacağım.
CSS Tablo Biçimlendirme / CSS Tablo Şekillendirme -1
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
#personel{ width: 100%; font: bold 1.25em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; border: 20px solid #C1DAD7; letter-spacing: 2px; text-transform: uppercase; text-align: left; padding: 6px 6px 6px 12px; background: #C1DAD7; border-collapse: collapse; } #personel th{ color: #54737A; padding: 6px 6px 6px 12px; } #personel td{ padding: 6px 6px 6px 12px; font-family: 'Montserrat', sans-serif; font-weight: 300; } #personel tr{ color: #6D929B; background: #fff; } #personel tr:hover{ background:#CAE8EA; color:#fff; } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,300" rel="stylesheet"> <table id="personel"> <tr> <th>Sıra</th> <th>Ad</th> <th>Soyad</th> <th>Yaş</th> </tr> <tr> <td>1</td> <td>Asuman</td> <td>Göldağ</td> <td>29</td> </tr> <tr> <td>2</td> <td>Ünlüsoy</td> <td>Mansur</td> <td>49</td> </tr> <tr> <td>3</td> <td>Cansen</td> <td>Karaburun</td> <td>84</td> </tr> <tr> <td>4</td> <td>Ülküsel</td> <td>Özkahraman</td> <td>73</td> </tr> <tr> <td>5</td> <td>Funda</td> <td>Sığırcı</td> <td>38</td> </tr> <tr> <td>6</td> <td>Edibe</td> <td>Farımaz</td> <td>89</td> </tr> <tr> <td>7</td> <td>Uluer</td> <td>Akgül</td> <td>38</td> </tr> <tr> <td>8</td> <td>Tarımer</td> <td>Zımba</td> <td>60</td> </tr> <tr> <td>9</td> <td>Şule</td> <td>Alaca</td> <td>66</td> </tr> <tr> <td>10</td> <td>Hafız</td> <td>Bayduz</td> <td>38</td> </tr> </table> |
CSS Tablo Biçimlendirme / CSS Tablo Şekillendirme -2
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
#personel { border-collapse: collapse; width: 100%; } #personel td, #personel th { border: 1px solid #ddd; padding: 8px; } #personel tr:nth-child(even){background-color: #f2f2f2;} #personel tr:hover { background-color: #2ecc71; color:#fff; } #personel th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #2c3e50; color: white; } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<table id="personel"> <tr> <th>Sıra</th> <th>Ad</th> <th>Soyad</th> <th>Yaş</th> </tr> <tr> <td>1</td> <td>Asuman</td> <td>Göldağ</td> <td>29</td> </tr> <tr> <td>2</td> <td>Ünlüsoy</td> <td>Mansur</td> <td>49</td> </tr> <tr> <td>3</td> <td>Cansen</td> <td>Karaburun</td> <td>84</td> </tr> <tr> <td>4</td> <td>Ülküsel</td> <td>Özkahraman</td> <td>73</td> </tr> <tr> <td>5</td> <td>Funda</td> <td>Sığırcı</td> <td>38</td> </tr> <tr> <td>6</td> <td>Edibe</td> <td>Farımaz</td> <td>89</td> </tr> <tr> <td>7</td> <td>Uluer</td> <td>Akgül</td> <td>38</td> </tr> <tr> <td>8</td> <td>Tarımer</td> <td>Zımba</td> <td>60</td> </tr> <tr> <td>9</td> <td>Şule</td> <td>Alaca</td> <td>66</td> </tr> <tr> <td>10</td> <td>Hafız</td> <td>Bayduz</td> <td>38</td> </tr> </table> |
[…] CSS Tablo Biçimlendirme […]