Bilişim dünyasına kaliteli, özgün ve Türkçe içerikler kazandırmayı hedefleyen bir platform..

HTML ve CSS kodları kullanarak tablolarınızı Excel görünümlü olacak şekilde özelleştirebilirsiniz.

HTML Kodları

<table border="" style="border-collapse: collapse; border-bottom-width: 0px; border-right-width: 0px;">
  <tr style="background-color: #EEEEEE;">
    <td style="width: 25px;"></td>
    <td class="ExcelTableFormationCol">Pazartesi</td>
    <td class="ExcelTableFormationCol" style="background-color: Gold;">B</td>
    <td class="ExcelTableFormationCol">Çarşamba</td>
    <td class="ExcelTableFormationCol">Perşembe</td>
    <td class="ExcelTableFormationCol">Cuma</td>
    <td class="ExcelTableFormationCol">Cumartesi</td>
    <td class="ExcelTableFormationCol">Pazar</td>
    <td class="ExcelTableFormationCol">H</td>
    <td class="ExcelTableFormationCol">I</td>
    <td class="ExcelTableFormationCol" style="border-right-width: 0px;">J</td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow">1</td>
    <td>1</td>
    <td>2</td>
    <td></td>
    <td></td>
    <td>Matemetik</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow" style="background-color: Gold;">2</td>
    <td></td>
    <td style="border: 3px solid black;"><div id="ExcelCursorOuter"><div id="ExcelCursor"></div></div></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow">3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow">4</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow">5</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow">6</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow">7</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr>
    <td class="ExcelTableFormationRow">8</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
  <tr id="LastRow">
    <td class="ExcelTableFormationRow">9</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="LastCol"></td>
  </tr>
</table>

CSS Kodları

<style>
.ExcelTableFormationCol {
                      width: 55px;
                  height: 20px;
                  text-align: center;
                  font-family: Arial Narrow;
                  font-size: 14px;
                }

.ExcelTableFormationRow {
                  background-color: #EEEEEE;
                  text-align: center;
              font-family: Calibri;
              font-size: 16px;
              height: 20px;
            }

#LastRow td {
          border-bottom-width: 0px;
        }

.LastCol {
       border-right-width: 0px;
     }

     #ExcelCursorOuter {
      position: relative;
     }

     #ExcelCursor {
      position: absolute;
      top: 8px;
      right: -5px;
      background: #000;
      width: 5px;
      height: 5px;
      border: 1px solid #fff;
      border-right: 0px;
      border-bottom: 0px;
     }

</style>