<!DOCTYPE html>
<html>
<head>
<style>
tr {
width: 800px;
height: 200px;
background-color: green;
}
klasa1 {
margin-left: 50px;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td class="klasa1">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Czemu nie przesuwa napisu od lewej strony w td jak dałem margin na 50px?
Bo td to element nie blokowy na który nie działa margin?
Spróbuj paddingiem.
Jak dam padding to też nic się nie dzieje. Testuje to na https://www.w3schools.com/
Błąd składniowy w CSS
zamiast klasa1 { daj z kropką .klasa1 {
możesz dodać span do elementu w td i wtedy powinno śmigać, pobawić się klasami, jeśli chcesz żeby th miały inny margin niż td
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td><span class="klasa1">Peter</span></td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
A jeśli td to elementy blokowe to jeśli pierwszy element td ma np padding 50px to kolejny element td w tym wierszu też będzie już miał od razu taki padding? Da się jakoś to zresetować aby kolejny element tego paddingu nie miał?
Bo właśnie chyba tak jest ale nie mogę znaleźć rozwiązania jak zrobić aby kolejny element td nie miał tego paddingu już z poprzedniego elementu td w tym samym wierszu.
masz, ciapo :P https://jsfiddle.net/nL3r40my/1/
<!DOCTYPE html>
<html>
<head>
<style>
tr {
width: 800px;
height: 200px;
background-color: green;
}
.klasa1 {
background-color: red;
margin-left: 50px;
}
.klasa2 {
background-color: cyan;
margin-left: 100px;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td><span class="klasa1">Griffin</span></td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td><span class="klasa2">Stewie</span></td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
operuj na klasach normalnie w CSS, i rób to ze span
Dzięki :) Czemu na span działa margin? Wtedy td nie traktuje jako elementu blokowego?
Jeśli dodam margin-top w klasie1 to on w tym kodzie nie działa.
zajrzyj proszę do dokumentacji, nie pamiętam wszystkich niuansów. Z tego co pamiętam to elementy tabelki są "nieformatowalne". Napis/tekst można formatować ale też ma ograniczenia. A span jest traktowany tak samo jak div, lecz oba mają trochę inne zastosowania.
Właśnie od kilku h szukam jak zrobić aby kolejny element td po poprzednim elemencie td nie brał paddingu i nie mogę tego znaleźć. Chciałbym aby drugi element td nie był w linii z poprzednim elementem td, tylko był od niego wyższy.
Chciałbym aby drugi element td nie był w linii z poprzednim elementem td, tylko był od niego wyższy.
Wyższy, czy wyżej od poprzedniego? A może wyższa czcionka, ale z "równym spodem"? Może wytłuścić co drugą literkę? Tak czy siak, szef chce dane do faktury.
Chcę aby był położony wyżej od poprzedniego elementu td.
Hmm jak zamiast spana dałem znacznik p to jest możliwe zmiana margin-top. Nic już nie czaje czemu na spanie nie było to możliwe.
Jakbyś znał podstawy CSSa to byś wiedział.
Nie wszystkie elementy poddają się marginowi. Na pewno robią to elementy z atrybutem wyświetlania block, inline-block i niektóre elementy liniowe.
Część rzeczy z doświadczenia się pamięta co poddaje się marginowi a co nie, część trzeba wziąć na logikę. Inna sprawa, że stan innych elementów obrobionych w CSS też wpływa na to, jak działa margin (czy np. nadrzędny element jest realatywny, czy absolutny, czy liniowy, czy jeszcze inne właściwości).
Znacznik <td> to ani element liniowy ani blokowy. To jest komórka tabeli. Tabela z założenia jest elementem spójnym, w którym nie występują odległości między komórkami jak między np. divami. To jest inna struktura rządząca się swoimi prawami. Można sterować paddingiem, który jest wewnętrzym marginesem (nazwijmy to), można sterować ułożeniem elementów w poziomie (vertical-align), ustalać grubości obramowań i wiele innych rzeczy, których czasami normalnie nie ustawisz w innych elementach.
Reasumując - źle do sprawy podchodzisz. Nie masz wiedzy a próbujesz coś zrobić. Miotasz się.
Zamiast pisania 100 postów na forum o jedną pierdołę, polecam CI lekturę http://webmaster.helion.pl/index.php/kurs-html oraz http://webmaster.helion.pl/index.php/kurs-css. Świetny kurs dla początkujących.
Dobrze byłoby abyś jeszcze zgłębił temat coś na tej zasadzie: https://helion.pl/ksiazki/css-wedlug-erica-meyera-kolejna-odslona-eric-a-meyer,cssods.htm#format/d
Facet opisuje tam całe zachowanie CSSa i można dowiedzieć się dokładnie czemu elementy zachowują się tak a nie inaczej.
Cały ten czas poświęcony na forum, jak sobie przeznaczysz na te lektury to szybciej czegokolwiek się nauczysz niż będziesz zadawał pytania bez celu.