+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: dwa problemy: obramowanie kolumny tabeli i obszar dokumentu (/thread-dwa-problemy-obramowanie-kolumny-tabeli-i-obszar-dokumentu)
Strony:
1
2
dwa problemy: obramowanie kolumny tabeli i obszar dokumentu - pawmar - 10-01-2011
Witam, jestem początkującym w HTML i CSS, mam takie 2 zadania do rozwiązania:
1.Wykorzystując style CSS utwórz tabelę o trzech kolumnach, każda kolumna będzie miała osobne jednolite obramowanie.
2.Napisz kod strony, w której obszar dokumentu zawiera obramowanie i jest ograniczony do rozmiarów 200 na 100 pikseli.
Za pierwsze nie wiem jak się zabrać, natomiast drugie rozwiązałem w ten sposób:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset=Windows-1250">
<title>Moja strona WWW</title>
<style type="text/css">
html, body {
width: 200px;
height: 100px;
margin: 10px auto;
}
div {
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<div>Obszar dokumentu</div>
</body>
Jak zrobić aby strona była wyśrodkowana również w IE, pod FF i Chrome działa i warstwa jest wyśrodkowana.
RE: dwa problemy: obramowanie kolumny tabeli i obszar dokumentu - Ancik - 10-01-2011
Witaj,
Ad.1) Powinieneś stworzyc tabele o 3 kolumnach, i każdej z tych kolumn nadaj za pomocą deklaracji CSS obramowanie. Wystaczy, że ustawisz obramowanie dla znacznika kolumny.
Ad.2) Po pierwsze, deklaracja body { height/width} nie jest potrzebna, wystarczy taka deklaracja dla diva. Jeżeli chcesz aby ten div znajdował się na środku strony to powinineś ponadto nadac divowi deklaracje { margin-left: auto; margin-right: auto;}.
PS. Nie środkuj body, tj. powyżej zrobiłeś. Jeżeli masz zamiar środkowac stronę, zawsze twórz konetener, który będzie ją zawierał i środkuj wlaśnie ten koneter. Chyba, że zrobiłeś to teraz tylko na potrzeby cwiczenia
Pozdrawiam.
RE: dwa problemy: obramowanie kolumny tabeli i obszar dokumentu - pawmar - 10-01-2011
Ad.1) A jak ustawić obramowanie dla znacznika kolumny, bo z wierszem to by nie było problemu?
Ad.2) Ten fragment wyśrodkowuje dokument: margin: 10px auto;. Jak odpalisz ten dokument w Firefox lub Chrome to zobaczysz, że działa, natomiast pod IE nie. Próbowałem z twoją podpowiedzią, jednak nic to nie daje.
RE: dwa problemy: obramowanie kolumny tabeli i obszar dokumentu - Ancik - 10-01-2011
Co do problemu ze środkowaniem, to może powiedz jaką wersje IE masz? Ustawiłeś {margin: auto} dla diva, a nie dla body? Nigdy nie spotkałem się z sytuacją w której IE nie interpretowałoby prostego środkowania kontenera.
Pokusiłem się o sprawdzenie tego u siebie. Twój kod środkuje u mnie tego diva zarówno w IE, FF, OPERZE jak i GOOGLE CHROME. Uaktualnij wersje IE, może po prostu masz starszą, a tam lubią dziac sie różne cuda.
Co do tej tabeli, jest taka deklaracja jak "border-spacing", ktora jest odpowiedzią na twoje pytanie
. U mnie wygląda to tak:HTML
Kod:
<body>
<div>Obszar dokumentu</div>
<table cellspacing="0" cellpadding="0" width="200" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>CSS
Kod:
<style type="text/css">
html, body {
width: 200px;
height: 100px;
margin: 10px auto;
}
div {
width: 200px;
height: 100px;
border: 1px solid red;
}
td { padding-right: 10px;}
table {
border: 1px black solid;
border-spacing: 0.4em 0;
}
</style>Wszystko jest jak należy
Pozdrawiam.
RE: dwa problemy: obramowanie kolumny tabeli i obszar dokumentu - Kartofelek - 10-01-2011
<table>
<col class="pierwsza" />
<col class="druga" />
<col class="trzecia" />
<tr class="first"><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr class="last"><td></td><td></td><td></td></tr>
</table>
.pierwsza {border:2px solid red; border-top-width:0px; border-bottom-width:0px;}
.pierwsza {border-left:2px solid blue; border-top-width:0px; border-bottom-width:0px;}
.pierwsza {border-left:2px solid green; border-top-width:0px; border-bottom-width:0px;}
tr.first td {border-top-width:2px;}
tr.last td {border-bottom-width:2px;}
Powodzenia
RE: dwa problemy: obramowanie kolumny tabeli i obszar dokumentu - pawmar - 11-01-2011
Podany przez ciebie Kartofelek kod, nie wyświetla obramowania, nawet jak się poprawi nazwy klas: .pierwsza, .druga, .trzecia Jeżeli chodzi o wyśrodkowanie elementów w IE, to rzeczywiście aktualizacja IE pomogła. Ancik, a nie wiesz czy da się tak zrobić aby a kolumnach nie było linii poziomych rozdzielających wiersze?
RE: dwa problemy: obramowanie kolumny tabeli i obszar dokumentu - Kartofelek - 11-01-2011
Wyświtla bez problemu, tyle tylko że to jest przepis i musisz resztę sam dorobić. Oczywista sprawa że pewnie trzeba by coś z obramowaniem tabeli zrobić
Ale tego czego brakuje nie zdradzę, byś sam trochę popracował nad tymi zadaniami.
Ps. podpowiedź -> google table col
RE: dwa problemy: obramowanie kolumny tabeli i obszar dokumentu - Ancik - 11-01-2011
Witaj,
Ciesze się, że mogłem pomóc. Poniżej zamieszam kod, który usuwa poziome linie rozdzielające wiersze. Problem polega na tym, że każda komórka ma osobne obramowanie i w momencie kiedy komórka łączy się z ta poniżej, obramowania nachodzą na siebie tworząc grubszą linie. Przy większej i bardziej skomplikowanej tabeli prawdopodobnie będziesz musiał uciec się do nieco innych środków (które lepiej, żebyś odkrył już sam
), jednak na chwilę obecną wystarczy Ci takie proste rozwiązanie.XHTML
Kod:
<body>
<div>Obszar dokumentu</div>
<table cellspacing="0" cellpadding="0" width="200" border="0">
<tr class="border">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>CSS
Kod:
<style type="text/css">
html, body {
width: 200px;
height: 100px;
margin: 10px auto;
}
div {
width: 200px;
height: 100px;
border: 1px solid red;
}
tr td { border-bottom: 1px solid black; border-left: 1px solid black; border-right: 1px solid black;}
.border td { border-top: 1px solid black;}
table {
border: 1px black solid;
border-spacing: 0.4em 0;
}
</style>Pozdrawiam.
RE: dwa problemy: obramowanie kolumny tabeli i obszar dokumentu - Kartofelek - 11-01-2011
Patrz -> border-collapse:collapse
RE: dwa problemy: obramowanie kolumny tabeli i obszar dokumentu - pawmar - 11-01-2011
pozmieniałem css trochę, i teraz wygląda tak:
table {
width: 300px;
border-collapse: collapse;
}
.pierwsza {border:2px solid red; border-top-width:2px; border-bottom-width:2px;}
.druga {border:2px solid blue; border-top-width:2px; border-bottom-width:2px;}
.trzecia {border:2px solid green; border-top-width:2px; border-bottom-width:2px;}
tr.first td {border-top-width:2px;}
tr.last td {border-bottom-width:2px;}
w dobrym kierunku?