[HTML/POMOC] Nachodzące komórki tabeli.

pytanie zadane 18 października 2020 w HTML i CSS przez Kazafka Nowicjusz (200 p.)

Cześć,

Przychodzę tutaj z kolejnym pytankiem. Więc dzisiaj udało mi się skonstruować ulepszoną wersję mojego projektu, ale nadal chciałbym go usprawnić. Mianowicie, wykonałem prosty overlay strony za pomocą jednej tabeli. Ma ona 3 komórki o podanych ID: head, nav i body. Na razie, dwie komórki nav i body, po prostu się popychają. Nie wiem jednak, jak mogę wykonać to tak, aby komórka nav nachodziła na komórkę body. Sposób z div'ami, który ja akurat widziałem, czyli "z-index: 1; top: 0; position: absolute;" nie działa.

Screen:

Kodzik *rezultat wygląda TROSZKE inaczej kiedy normalnie wyświetla się tą stronę*: CodePen

2 odpowiedzi

odpowiedź 18 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

Tabele nie służą do układania layoutu, lecz do prezentacji danych tabelarycznych.

Tables must not be used as layout aids. Historically, some web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.

https://html.spec.whatwg.org/multipage/tables.html#the-table-element

The HTML <table> element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

Elementy o id-kach: head, nav i body możesz zamienić na semantycznie lepiej nadające się odpowiedniki <header>, <nav> i <main>.

Zaś do samego ułożenia layoutu użyj Grida i/lub Flexboxa.

komentarz 18 października 2020 przez Kazafka Nowicjusz (200 p.)

Hej,

Dzięki za pomoc. Spróbuję użycia owych tag'ów.

odpowiedź 18 października 2020 przez VBService Ekspert (253,280 p.)
edycja 18 października 2020 przez VBService

Jak już powyżej @ScriptyChris wspomniał, może powinieneś przemyśleć sposób projektowania swojego layout-u i użyć elementów html semantycznie do tego przeznaczonych.
Próbowałeś wyciągną div poza tabele? (Kod nie jest "wysokich lotów", ale działa )

	<body>
		<table>
			<tr>
				<td id="head" colspan="2"><img id="openmenu" src="https://i.imgur.com/xiOimP1.png" onclick="openMenu()"/></td>
			</tr>

			<tr>				
				<td id="body">Body</td>
			</tr>
		</table>
        <div id="nav" class="navopen">Navigation</div>
	</body>

Pewna korekta w css-ie

:root {
	--accent: #fcba03;
	--bg: #272d30;
	--bg2: rgba(39, 45, 48, 0.5);
    --head-height: 25px;
}
* {
  box-sizing: border-box;
}

i tu

#head {
	padding: 8px;
	height: var(--head-height);
	background-color: var(--accent);
}

#nav {
  position: absolute;
	padding: 0px 0px 0px 0px;
	max-width: 300px;
  width: 300px;
	background-color: var(--bg);
	color: #ffffff;
	top: calc(var(--head-height)*3.4); /* wiem, tu poszedłem na "łatwiznę" */
  left: -300px;
	z-index: 1;
	white-space: nowrap;
	transition-duration: 1s;
}

i js-ie

        document.getElementById("nav").style = "transition-duration: 1s; left: 0px; padding: 8px 8px 8px 8px;";
	    toggleAnim = true;
    }

komentarz 18 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

Próbowałeś wyciągną div poza tabele?

Poprawianie tego layoutu w formie tabeli nie ma sensu, ponieważ tabele nie służą do układania layoutu, lecz do prezentacji danych tabelarycznych.

komentarz 18 października 2020 przez VBService Ekspert (253,280 p.)
edycja 18 października 2020 przez VBService

@ScriptyChris

Poprawianie tego layoutu w formie tabeli nie ma sensu, ponieważ tabele nie służą do układania layoutu, lecz do prezentacji danych tabelarycznych.

Zgadzam się z tobą, masz 100% rację, ale... nigdy nie miałeś takiej tzw. "dziecięcej" ciekawości, nie skażonej żadnymi zasadami, i pytania: "A co by było, gdy zrobię ... tak?" . Jak historia wynalazków pokazuje, ludzie, którzy umieli sobie (nie bali się) zadać to pytanie, dokonywali przeważnie, przełomowych odkryć, . to jest pewnego rodzaju kreatywność, która nie musi być sensowna od początku, to czy dany pomysł jest "użyteczny" mogą później wykazać badania i testy. . Pamiętam początki "zderzaka" pana Łągiewki, wszyscy fizycy po wszelakiej maści uniwersytetach i politechnikach, mówili "... to nie może działać ...", bo łamie prawa A i prawa B fizyki itd., a jedna działa, a pan Łągiewka, jak dobrze pamiętam ukończył technikum mechaniczne, miał pomysł i wizję i na przekór wszystkim zadał sobie to pytanie.

komentarz 18 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

Zgadzam się, że czasem podążanie pod prąd pod wpływem ciekawości przyczynia się do odkrycia czegoś. Warto jednak uświadamiać ludzi, gdy próbują z kwadratu zrobić koło.

Poniższy obrazek wg mnie dobrze to odzwierciedla:

komentarz 18 października 2020 przez Kazafka Nowicjusz (200 p.)

@VBService,

Co do div'ów, próbowałem wsadzić je do komórek tabeli, jeżeli o to Ci chodziło, ale cóż.... nie wychodziło to najlepiej. Teraz próbuję wykorzystać znaczniki <head> <nav> i <main>.

komentarz 18 października 2020 przez VBService Ekspert (253,280 p.)
edycja 18 października 2020 przez VBService

@ScriptyChris

Warto jednak uświadamiać ludzi, gdy próbują z kwadratu zrobić koło.

Poniższy obrazek wg mnie dobrze to odzwierciedla:

Tak, ale nie do końca, bo ten obrazek według mnie pokazuje, że da się

... podążać pod prąd pod wpływem ciekawości ...

zrobić coś na przekór zasadą. Ta osoba, która to zrobiła, może wykazywać się sporą kreatywnością, pomijając fakt, że odkryła, że tablica i litery zrobione z pianki (foam), można dopasować (bo są "elastyczne"), pomimo pewnych przeszkód (do pewnego stopnia nie ma rzeczy niemożliwych). Inna sprawa by była, jakby tablica i literki zrobione by były z np.: drewna (..., ale od czego jest pilnik do drewna ).