Html Tablo Oluşturma

Html Tablo Oluşturma

HTML ve CSS kodları ile nasıl sade bir tablo oluşturulacağı hakkında kısa bir yazı.

4 sütun ve 5 satırlı bir tabloyu oluşturmaya çalışacağız. Tablo biri başlık olmak üzere beş satırdan oluşacak ve bu beş satırı beş sütuna böleceğiz. Tablo içeriğini vurgulamak için arka plan rengini bulunduğu alana göre değiştireceğiz. Oluşturduğumuz tablo her ekran çözünürlüğüne uyumlu olması için css kodları yardımıyla yeniden boyutlandırılabilir bir genişlik ve uzunluğa sahip olacak.

Örnek Tablo

1 Sutun	2 Sutun	3 Sutun	4 Sutun
1 Sutun 1 Satir	2 Sutun 1 Satir	3 Sutun 1 Satir	4 Sutun 1 Satir
1 Sutun 2 Satir	2 Sutun 2 Satir	3 Sutun 2 Satir	4 Sutun 2 Satir
1 Sutun 3 Satir	2 Sutun 3 Satir	3 Sutun 3 Satir	4 Sutun 3 Satir
1 Sutun 4 Satir	2 Sutun 4 Satir	3 Sutun 4 Satir	4 Sutun 4 Satir

Uygulama Css Kodu

table.Tablo1 {
  border: 1px solid #0000FF;
  background-color: #B0E0E6;
  width: 50%;
  text-align: center;
  border-collapse: collapse;
}
table.Tablo1 td, table.Tablo1 th {
  border: 1px solid #000000;
  padding: 3px 2px;
}
table.Tablo1 tbody td {
  font-size: 13px;
}
table.Tablo1 tr:nth-child(even) {
  background:#00BFFF;
}
table.Tablo1 thead {
  background: #0000FF;
  background: -moz-linear-gradient(top, #0000FF 0%, #327cad 66%, #0000FF 100%);
  background: -webkit-linear-gradient(top, #0000FF 0%, #327cad 66%, #0000FF 100%);
  background: linear-gradient(to bottom, #0000FF 0%, #327cad 66%, #0000FF 100%);
  border-bottom: 2px solid #444444;
}
table.Tablo1 thead th {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}
table.Tablo1 thead th:first-child {
  border-left: none;
}

table.Tablo1 tfoot {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  background: #D0E4F5;
  background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444444;
}
table.Tablo1 tfoot td {
  font-size: 15px;
}

table.Tablo1 tfoot .links a{
  display: inline-block;
  background: #0000FF;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}

Uygulama Html Kodu

<table class="Tablo1">
  <thead>
    <tr>
       <th>1 Sutun</th>
       <th>2 Sutun</th>
       <th>3 Sutun</th>
       <th>4 Sutun</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
    </tr>
  </tfoot>
  <tbody>
    <tr>
       <td>1 Sutun 1 Satir</td>
       <td>2 Sutun 1 Satir</td>
       <td>3 Sutun 1 Satir</td>
       <td>4 Sutun 1 Satir</td>
    </tr>
    <tr>
       <td>1 Sutun 2 Satir</td>
       <td>2 Sutun 2 Satir</td>
       <td>3 Sutun 2 Satir</td>
       <td>4 Sutun 2 Satir</td>
    </tr>
    <tr>
       <td>1 Sutun 3 Satir</td>
       <td>2 Sutun 3 Satir</td>
       <td>3 Sutun 3 Satir</td>
       <td>4 Sutun 3 Satir</td>
    </tr>
    <tr>
       <td>1 Sutun 4 Satir</td>
       <td>2 Sutun 4 Satir</td>
       <td>3 Sutun 4 Satir</td>
       <td>4 Sutun 4 Satir</td>
    </tr>
  </tbody>
</table>

Tablo Resmi