Aynı sayfada farklı tablo yapıları için CSS

CSS hakkında yardım alabilir ve paylaşımlarınızı yapabilirsiniz.
Cevapla
Özgür
Deneyimli Üye
Deneyimli Üye
Mesajlar: 351
Kayıt: 16 Şub 2009, 01:16

Aynı sayfada farklı tablo yapıları için CSS

Mesaj gönderen Özgür » 09 Eki 2011, 02:13

Kod: Tümünü seç

table {
	background-color: #FFFFFF;
	border: none;
	color: #495E49;
	font-family: arial, helvetica, sans-serif;
	font-size: 12px;
	text-align: left;
	width: 800px;
}

table a:link, table a:visited, table a:active {
	background-color: transparent;
	color: #0096BD;
	text-decoration: none;
}

table a:hover {
	background: transparent;
	color: #000000;
	text-decoration: underline;
}

table caption {
	background-color: transparent;
	color: #67BD2A;
	font-family: Georgia, serif;
	font-size: 24px;
	padding-bottom: 12px;
	padding-left: 8px;
	text-align: left;
}

table, td, th {
	margin: 0;
	padding: 0;
}

tbody td, tbody th {
	background-color: #D6F2C3;
	border-bottom: 2px solid #B3DE94;
	border-top: 3px solid #FFFFFF;
	padding: 9px;
}

tbody tr.odd th, tbody tr.odd td {
	background-color: #C8EDAE;
	border-bottom: 2px solid #67BD2A;
}

tbody tr:hover td, tbody tr:hover th {
	background-color: #BAE899;
}

td, th {
	vertical-align: middle;
}

tfoot td, tfoot th {
	font-weight: bold;
	padding: 4px 8px 6px 9px;
}

thead th {
	font-family: arial, helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	line-height: 19px;
	padding: 0 8px 2px 8px;
	white-space: nowrap;
}
css'ini kullanıyorum sayfada kullandığım tablo yukardaki değerleri alıyor. Fakat sayfadaki tüm tablolar yukardaki özellikleri alıyor. Resimlerde id ile istediğimiz çerçeve özelliği veriyoruz ya. Tablolara ayrı ayrı özellik tanımlama nasıl yapılıyor. id geçerli mi diye baktım. ve #table1 diye bir tanımlama yaptım, fakat doğru bir yöntem değil galiba çünkü th, td, tr gibi tanımlamaların da sonuna 1 eklemek gerekecek herbirine id mi tanımlamak lazım? Daha pratik bir yolu olmalı.

Kullanıcı avatarı
Gökhan
Deneyimli Üye
Deneyimli Üye
Mesajlar: 390
Kayıt: 11 Şub 2009, 22:57

Re: Aynı sayfada farklı tablo yapıları için CSS

Mesaj gönderen Gökhan » 09 Eki 2011, 11:09

table diye tanımlama yaptığında, bu tüm tabloların varsayılan özelliği olur, ayrı tablolar için class kullanabilirsin.

Örneğin; Sonuçlar diye özel bir tablo yapacaksan;

table.sonuclar{//...} yapabilirsin.

Bu özelliği, tablo kodlarında;

<table class="sonuclar" ... şeklinde çağırabilirsin.

Özgür
Deneyimli Üye
Deneyimli Üye
Mesajlar: 351
Kayıt: 16 Şub 2009, 01:16

Re: Aynı sayfada farklı tablo yapıları için CSS

Mesaj gönderen Özgür » 09 Eki 2011, 15:17

Kod: Tümünü seç

table.yorumlar {table-layout: auto; width: 350px; border-collapse: collapse;  } // oldu
table.sonuclar {table-layout: fixed; width: 350px; border-collapse: collapse;} // oldu
td.yorumlar, td, th { /* olmadı */
	margin: 10;
	background-color:#ff0000;
	padding: 10;
}
td.sonuclar, td, th { /* olmadı */
background-color:#c0c0c0;
margin: 5;
padding: 5;
}
Table özelliklerini özelleştirdim, fakat td,tr gibi tablo içi özellikleri özelleştiremedim.

Özgür
Deneyimli Üye
Deneyimli Üye
Mesajlar: 351
Kayıt: 16 Şub 2009, 01:16

Re: Aynı sayfada farklı tablo yapıları için CSS

Mesaj gönderen Özgür » 09 Eki 2011, 15:51

th ve tfoot 'un anlamı nedir. Bunlar DHTML argümanları mı?

Kullanıcı avatarı
Gökhan
Deneyimli Üye
Deneyimli Üye
Mesajlar: 390
Kayıt: 11 Şub 2009, 22:57

Re: Aynı sayfada farklı tablo yapıları için CSS

Mesaj gönderen Gökhan » 09 Eki 2011, 17:41

Özgür yazdı:

Kod: Tümünü seç

table.yorumlar {table-layout: auto; width: 350px; border-collapse: collapse;  } // oldu
table.sonuclar {table-layout: fixed; width: 350px; border-collapse: collapse;} // oldu
td.yorumlar, td, th { /* olmadı */
	margin: 10;
	background-color:#ff0000;
	padding: 10;
}
td.sonuclar, td, th { /* olmadı */
background-color:#c0c0c0;
margin: 5;
padding: 5;
}
Table özelliklerini özelleştirdim, fakat td,tr gibi tablo içi özellikleri özelleştiremedim.

Ayrı ayrı tapmalısın.

Kullanıcı avatarı
Gökhan
Deneyimli Üye
Deneyimli Üye
Mesajlar: 390
Kayıt: 11 Şub 2009, 22:57

Re: Aynı sayfada farklı tablo yapıları için CSS

Mesaj gönderen Gökhan » 15 Tem 2013, 17:48

Özgür yazdı:th ve tfoot 'un anlamı nedir. Bunlar DHTML argümanları mı?
th, herhangi bir tablonun ilk satırı tfoot da son satırı anlamına gelir.

tfoot tagları arasına yazdığın tr satırı, yeri neresi olursa olsun, tablonun en sonunda çıkar.

Cevapla

Kimler çevrimiçi

Bu forumu görüntüleyen kullanıcılar: Hiç bir kayıtlı kullanıcı yok ve 2 misafir