Merhabalar arkadaşlar sitemde kullandığım kendi yapımım widget olarak kullandığım Süper Toto Süper Lig Puan Durumu tablosunu sizlerle paylaşmak istedim. Piyasada doğru düzgün reklamsız ve genişlik ayarları otomatik ayarlanan bir puan durumu yoktu bende kendim manuel olarak table mantığıyla yaptım. Güzel tarafı koyduğunuz widget alanının genişliğine göre otomatik konumlanıyor, eksik tarafı ise manuel olarak elinizle düzenlemelisiniz. Yakında Iframe versiyonunu da yapıp atarım o sorunuda çözmüş oluruz :)

DEMO ADRESİ : www.fifa15.tk (en sağdaki sidebar`da en altta)
DEMO GÖRÜNTÜSÜ :

HTML Kodları :
Son Güncelleme : 1,09,2014 / 15:37

Sıra	Takım	Puan
1	Galatasaray	3
2	Fenerbahçe	3
3	Akhisar Belediye	3
4	Eskişehirspor	3
5	Gaziantepspor	3
6	Beşiktaş	3
7	Ç.Rizespor	1
8	Gençlerbirliği	1
9	Başakşehir	1
10	Kasımpaşa	1
11	K.Erciyesspor	1
12	Trabzonspor	1
13	K. Karabükspor	0
14	Balıkesirspor	0
15	Sivasspor	0
16	Konyaspor	0
17	Mersin İ.Y.	0
18	Bursaspor	0

Bunlarda benim temamın css table kodları :
Not: Aynı olmasını istiyorsanız bu css verilerini kullanmanız lazım aksi takdirde sizin css table verilerinize göre görünümü değişir.


/* Tab widget
/* ------------------------------------ */
.T20-tabs-nav { margin: 0; text-align: center; }
.T20-tabs-nav.tab-count-1 li { width: 100%; }
.T20-tabs-nav.tab-count-2 li { width: 50%; }
.T20-tabs-nav.tab-count-3 li { width: 33.333%; }
.T20-tabs-nav.tab-count-4 li { width: 25%; }
.T20-tabs-nav li { display: block; float: left; }
.T20-tabs-nav li a { position: relative;font-size: 22px;color: #B6B6B6;display: block;margin: 0 0 10px;padding: 0; }
.T20-tabs-nav li a:hover { border-bottom-color: #ccc; }
.T20-tabs-nav li.active a { color: #313131 }
.T20-tabs-nav li.active a:after { content: no-close-quote;position: absolute;width: 0px;height: 0px;bottom: -12px;right: 45%;border-left: 6px solid rgba(0, 0, 0, 0);border-right: 6px solid rgba(0, 0, 0, 0);border-bottom: 6px solid #313131; }
.T20-tab-count-4 li.active a:after { right: 42% }
.T20-tab-count-3 li.active a:after { right: 43% }
.T20-tabs-nav li a span { display: none; }

table,
.table {
background:transparent !important;
font-size:13px;
text-align:center;
border-collapse:collapse;
margin:0;
padding:0;
width:100%;
overflow:hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
table a,
.table a {
color:#fff;
}
table th,
.table th {
font-size:14px;
font-weight:normal;
text-align:center;
padding: 6px 8px !important;
color:#fff;
background-color: #F00043;
text-shadow:none;
}
table td,
.table td {
padding: 4px 8px !important;
text-align: center;
}

table tdkume,
.table tdkume {
padding: 4px 8px !important;
text-align: center;
background-color: #F00043;
}

table td:first-child,
.table td:first-child {
background: rgba(230, 230, 230, 1);
}
table tr,
.table tr {
border-bottom:1px solid #fff;
background-color:#f8f8f8;
-moz-transition:all .2s;
-webkit-transition:all .2s;
-o-transition:all .2s;
}
table tr:hover,
.table tr:hover, tr.topic-sticky {
background: #ddd;
-webkit-transition:all .2s;
transition:all .2s;
}
table tfoot td,
.table tfoot td {
padding: 14px !important;
text-align: left;
background:#313131;
color:#ffffff;
font-size:11px;
text-shadow:none;
}
table tfoot tr:hover,
.table tfoot tr:hover {
background:#ddd;
}