Pomoc w wykonaniu kilku tabel w html ;-)

TTiwaz [ Chor��y ]

/mój błąd

yo dawg [ 1979 ]

Głowy nie dam, bo tabele to archaizm i nie pracuję na nich już od jakiegoś czasu, ale obawiam sie, że bez zagnieżdżania komórek nie da rady.

Wygodniej to na divach zrobić.

TTiwaz [ Chor��y ]

Dla mnie cokolwiek związanego z komputerami to czarna magia, niestety musze wykonać coś na kształt tej tabeli ;/

wysiak [ Legend ]

Prosz, przynajmniej sie czegos nowego nauczysz.

Soulcatcher [ end of winter ]

Dokładnie takiej tabeli nie da się zrobić. Musisz zrobić to za pomocą więcej niż jednej tabeli.

kamyk_samuraj [ Legend ]

display:table/table-row/table-cell i pochodne w szablonie CSS

Soulcatcher [ end of winter ]

tak jak na rysunku --->


jeżeli nie zrobisz tego tak jak napisałęm to będziesz miał wiele efektów ubocznych w rówżnych przegladarkach


oczywiście da się to zrobić prościej za pomocą trzech DIVów w których są mniejsze divy

TTiwaz [ Chor��y ]

właśnie tak staram się to zrobiś, z 1 tabelą nie ma problemu, ale z samym stworzeniem tej wewnętrznej mam problem ;)

Soulcatcher [ end of winter ]

jak chcesz zagiąć panią z informatyki to zrób tą tabelkę tak jak poniżej


<style type="text/css"><!--
div‹border-left:2px solid #000000;border-top:2px solid #000000;font-family:Arial;font-size:10pt;font-weight:bold;color:#ff0000›
p‹text-align:center;margin:0px;margin-top:5px›
.cont‹width:500px;height:150px;position:relative;border:none;border-right:2px solid #000000;border-bottom:2px solid #000000;›
.cont div‹position:absolute›
.d1‹top:0px;left:0px;width:100px;height:50px›
.d2‹top:0px;left:100px;width:100px;height:50px›
.d3‹top:0px;left:200px;width:100px;height:50px›
.d4‹top:50px;left:0px;width:300px;height:50px›
.d5‹top:0px;left:300px;width:200px;height:25px›
.d6‹top:25px;left:300px;width:200px;height:75px›
.d7‹top:100px;left:0px;width:150px;height:50px›
.d8‹top:100px;left:150px;width:200px;height:50px›
.d9‹top:100px;left:350px;width:150px;height:50px›
--></style>


<div class="cont">
<div class="d1"><p>1</p></div>
<div class="d2"><p>2</p></div>
<div class="d3"><p>3</p></div>
<div class="d4"><p>4</p></div>
<div class="d5"><p>5</p></div>
<div class="d6"><p>6</p></div>
<div class="d7"><p>7</p></div>
<div class="d8"><p>8</p></div>
<div class="d9"><p>9</p></div>
</div>



nie jest to najbardziej optymalne rozwiązanie ale z pewnością najbardziej zabawne :)

Scatterhead [ P ]

Wklejam rozwiązanie na DIV'ach. Nie polecam tabelek bo są wolniejsze (szczególnie gdy zagnieżdzamy w sobie pare tabelek).



Jeżeli chcesz zmienić szerokości tabelek, wystarczy że zmienisz tam 3 wartości. Z czym, ta trzecia powinna być sumą dwóch poprzednich

W porównaniu z kodem Soulcatchera ten kod dostosowuje się sam do wysokości tego co ma być w środku, a do zmiany masz 3 zmienne dostosowujące szerokość, chyba że chcesz zakodować wysokość i pozycje każdego z bloków, tak jak powyżej, ale wtedy komórki nie będą odporne na zmianę tego co jest w środku, będą musiały zawsze wyglądać tak samo

yasiu [ Legend ]

ludzie, jeśli chłopak nie ogarnia tabelek, nie wrzucajcie mu rozwiązań na DIVach bo się z nich nigdy nie wytłumaczy. Sposób z zagnieżdżaniem tabel podany przez soula będzie ok. Nie ma znaczenia, że jest wolny itp. Mają się nauczyć pewnego sposobu myślenia, kombinowania. Ja do tej pory spotykam dorosłych, obytych z komputerami ludzi, którzy nawet nie wpadną na pomysł, żeby w wordzie zagnieździć tabele co by uzyskać potrzebny efekt.

26.11.2010

10:59

[14]

Soulcatcher [ end of winter ]

yasiu ---> ale mina nauczyciela informatyki z gimnazjum na widok tabelki w postaci

<div class="cont">
<div class="d1"><p>1</p></div>
<div class="d2"><p>2</p></div>
<div class="d3"><p>3</p></div>
<div class="d4"><p>4</p></div>
<div class="d5"><p>5</p></div>
<div class="d6"><p>6</p></div>
<div class="d7"><p>7</p></div>
<div class="d8"><p>8</p></div>
<div class="d9"><p>9</p></div>
</div>

jest bezcenna :)

TTiwaz [ Chor��y ]

Wypraszam sobie, 1 LO ;-)

yasiu [ Legend ]

soul - oczywiście że tak :) :) i nie wątpię, ale istotniejsze jest chyba zrozumienie tego kodu niż przeklejenie go :)

TTiwaz - ja nawet nie wiem, ile teraz się ma lat idąc do LO :) Nie chciałem Cię w żaden sposób obrazić, zresztą z tego co widzę, to nawet niechcący mi się nie udało hehe.

Soulcatcher [ end of winter ]

proszę żebyś nie myślał ze się z ciebie nabijamy

poniższa tabelka funkcjonalnie spełnia postawione przez ciebie wymagania, jakkolwiek wizualnie nie będzie zbyt piękna

podopisuj sobie "" przy parametrach



<table border=1 cellspacing=0 cellpadding=0>
<tr>
<td>


<table border=1 cellspacing=10 cellpadding=10 width=100%>
<tr>
<td>
<p>1</p>
</td>
<td>
<p>2</p>
</td>
<td>
<p>3</p>
</td>
</tr>
<tr>
<td colspan=3>
<p>4</p>
</td>
</tr>
</table>

</td><td>

<table border=1 cellspacing=0 cellpadding=10 width=100%>
<tr>
<td>
<p>5</p>
</td>
</tr>
<tr>
<td>
<p>6</p>
</td>
</tr>
</table>



</td></tr>
<tr><td colspan=2>


<table border=1 cellspacing=0 cellpadding=10 width=100%>
<tr>
<td>
<p>7</p>
</td>
<td>
<p>8</p>
</td>
<td>
<p>9</p>
</td>
</tr>
</table>


</td>
</tr>
</table>

kamyk_samuraj [ Legend ]

Soul ->
lepsza zabawa, jakby rzucić coś takiego

.container ‹
display: table;
›

.row ‹
display: table-row;
›

.cell ‹
display: table-cell;
width: 100px;
height: 100px;
border: 1px solid blue;
padding: 1em;
›


<div class="container">
<div class="row">
<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>
</div>
</div>

(najprostsze 3 komórki pod słońcem - do stworzenia tego z [1] trzebaby zdefiniować 2 dodatkoowe identyfikatory: z display: row-group i column-group
A na pytanio o starsze przeglądarki udzielić odpowiedzi: f*ck them
IMO zabawa borderkami jest już trochę denerwująca, skoro taki IE8 obsługuje widok tabelaryczny w CSS