Obramowania tabel w CSS


(Spider103) #1

Siemka. Panowie mam problem czy można zrobić w CSS'ie zrobić obramowanie dla WSZYSTKICH KOMÓREK? a nie tylko OGÓLNEGO OBRAMOWANIA? bo mi to nie wychodzi zobaczcie mój kod CSSvvvvvv:

body {

background-color: steelblue;

}

.plan_spidera<---- nazwa tabeli

{

border: 1px solid black;

margin-top: 100px;

margin-left: auto;

margin-right: auto;

width: 1200px;

height: 400px;

}

I obramowywyuje mi ale TYLKO zawnętrzne krawędzie..a ja chciałbym aby obramowało mi CAŁOSĆ+WSZYSTKIE komórki...da sie tak? Proszę o pomoc bo nie bardzo mam w tym doświadczenie :/....a może to da sie tylko zrobić poprzez zmienianie "pojedyńczo komórek"?


(Hindol) #2

td

{

border: 1px solid black;

}


(ra-v) #3
.plan_spidera td, .plan_spidera th

(Pablo_Wawa) #4

Bo zrobiłeś obramowanie dla TABLE, czyli zewnętrznego elementu. Musisz jeszcze dodać je dla elementów TH i TD.

Ale uważaj, bo jeśli tak zrobisz, to część obramowania się zdubluje/nałoży i będziesz miał podwójnie grubą linię - użyj

border-collapse: collapse;

dla TABLE. http://www.w3schools.com/cssref/pr_tab_border-collapse.asp

P.S. Możesz sobie zobaczyć u mnie jak taka ładna tabelka wygląda: http://www.programistrz.pl/projekty/webcell/demo/index.html


(Spider103) #5

Niestety zrobiłem tak jak mówił "ra-v" i nie wychodzi....wychodzi taka olbrzymia i nie równomierna, a jak robię tak jak mówi Pablo to wychodzi ale tylko ramka zewnętrzna :confused: co jest nie tak? tak wygląda kod po zmianach

.plan_spidera td, .plan_spidera th

{

border: 1px solid black;

margin-top: 100px;

margin-left: auto;

margin-right: auto;

width: 1200px;

height: 400px;

}

TO WYCHODZI DUŻA! !!

A jak wpisuję to "border-collapse: collapse"

CZYLI

.plan_spidera

{

border-collapse: collapse;

margin-top: 100px;

margin-left: auto;

margin-right: auto;

width: 1200px;

height: 400px;

}

TO WYCHODZI tak jak na początku! !!


(Pablo_Wawa) #6

Przecież napisałem, że dla elementów TH i TD też musisz nadać obramowanie! Dodaj kod

.plan_spidera th, .plan_spidera td

{

border: 1px solid black;

}

oraz w tym swoim

.plan_spidera

{

border-collapse: collapse;

...

(reszta bez zmian)

(Spider103) #7

ooo teraz już lepiej...ale teraz każda komórka jest oddzielnie a co zrobić aby one były połączone? (normalna tabelka)?


(Pablo_Wawa) #8

Może ustaw margines i padding na 0 dla TH i TD:

.plan_spidera th, .plan_spidera td

{

border: 1px solid black;

margin: 0;

padding: 0;

}

lub dodaj

padding: 0;

do .plan_spidera


(Spider103) #9

Już mam dziękuję za pomoc :smiley:


(Pablo_Wawa) #10

Też, dawno temu, walczyłem z tabelkami w CSS, bo w HTML dało się używać wpisu cellspacing="0" i cellpadding="0" dla TABLE, co załatwiało sprawę. :slight_smile:


(Spider103) #11

no właśnie w htmlu to prościutko..

-- Dodane 23.12.2012 (N) 19:17 --

Pablo mam inny problem...jak można formatować tekst w CSS'ie? możesz na przykładzie pokazać? chodzi o to aby napis np "IMIĘ" był pogrubiony i w czcionce 20, trzeba tekst napisać w html a potem jakoś formatować go w CSS? czy jak? próbowałem robić tak jak z tabelkami "poszczególnymi komórkami" i nie wychodzi. Możesz pomóc?


(Pablo_Wawa) #12

W komórkach piszesz tylko czysty tekst, a jeśli chcesz go dodatkowo sformatować, to komórce nadajesz dodatkową klasę, którą definiujesz w stylach. Np. kod HTML:

pierwsza komórkadruga komórka

Kod w CSS:

.wazne {

  font-weight: bold;

  font-size: 20px;

}

Zamiast opisu klasy .wazne możesz zawęzić styl do komórek TD z tą klasą poprzez td.wazne (i dalej w klamrach to co chcesz w stylach) - pamiętaj, że ta sama nazwa klasy może być inaczej sformatowana dla każdego elementu HTML - jak nie dodasz jego nazwy przez nazwą klasy, to dotyczyć się to będzie wszystkich elementów o tej klasie. Klas każdy element może mieć więcej niż jedną, oddzielamy je spacjami: komórka Tutorial: http://www.w3schools.com/cssref/ - po angielskuhttp://www.kurshtml.edu.pl/css/ - po polsku A jak więcej komórek (np. cały wiersz) ma mieć taki sam format, to robisz tak z TR:

pierwsza komórkadruga komórka

Niestety takiej "sztuczki" nie da się zrobić z daną kolumną (trzeba każdej komórce z takiej kolumny nadawać klasę).


(manieKMP) #13

(Pablo_Wawa) #14

@manieKMP - dzięki za informację, nie zdawałem sobie sprawy, że coś takiego można zrobić. Ułatwi to mi m.in. zarządzanie stylem kolumny w moim webowym arkuszu kalkulacyjnym: http://programistrz.pl/projekty/webcell/demo/index.html :slight_smile: