{"id":15799,"date":"2023-04-26T23:59:16","date_gmt":"2023-04-26T21:59:16","guid":{"rendered":"https:\/\/blogg.ngn.nu\/?p=15799"},"modified":"2023-04-30T12:52:22","modified_gmt":"2023-04-30T10:52:22","slug":"tisdag-fast-i-html-hantering-av-tabeller","status":"publish","type":"post","link":"https:\/\/blogg.ngn.nu\/index.php\/2023\/04\/26\/tisdag-fast-i-html-hantering-av-tabeller\/","title":{"rendered":"Tisdag – Fast i HTML-hantering av tabeller"},"content":{"rendered":"

[not: publicerad: 230430]<\/span><\/p>\n

Sol – men lite kyligt<\/p>\n

Sjukgymnastiken<\/b>
\nSjukskrev mig fr\u00e5n den idag ocks\u00e5.
\nN\u00e5got lurt \u00e4r det i kroppen… \u2753<\/p>\n

Ormar<\/b>
\nTog en tur ut till mina jaktmarker och det visade sig att hustrun hade r\u00e4tt – inga ormar i den h\u00e4r kyliga vinden \u00e4ven om solen tittar fram d\u00e5 och d\u00e5.<\/p>\n

VeckoM\u00e4tning<\/b>
\nTur att jag inte fortsatte kontrollera BLTR & puls under dagen.
\nBest\u00e4mde mig idag att sammanst\u00e4lla alla mina m\u00e4tningar – fr\u00e4mst vikten.<\/p>\n

Och presentera det p\u00e5 samma vis som jag g\u00f6r med mitt ’kubande’<\/p>\n

Problemet hade jag egentligen redan identifierat.
\nGrejar man med HTML JavaScript & CSS i en blogg som har WordPress som motor s\u00e5 f\u00f6ljs inte alla ’regler’.<\/p>\n

Jag b\u00f6rjade ju egentligen f\u00f6r flera dagar sedan.
\nJag ville allts\u00e5 ha en tabell d\u00e4r rubrikerna ligger fast och s\u00e5 kan man skrolla upp och ned samt \u00e5t sidorna – rubrikerna f\u00f6ljer med i sidled men inte vertikalt.<\/p>\n

Det d\u00e4r var inga problem.<\/p>\n

Problemet var att f\u00e5 samma bredd p\u00e5 det kolumnerna i det sk tabellhuvudet (thead) och tillh\u00f6rande sk cellbeteckning: ’th’.
\nRader ben\u00e4mns ’tr’ b\u00e5de i tabellhuvudet och i tabellkroppen (tbody).
\nI ’tbody’ har cellerna beteckningen: ’td’.<\/p>\n

Hur jag \u00e4n gjorde och f\u00f6ljde strikt regler s\u00e5 blev cellbredden olika i tabellhuvudet j\u00e4mf\u00f6rt med tabellkroppen.<\/p>\n

Sent p\u00e5 kv\u00e4llen sl\u00e4ppte det. Testade en helt odokumenterad l\u00f6sning.<\/p>\n

En mix av att definiera tabellens huvudsakliga egenskaper via CSS (styling – vilket g\u00f6rs i en separat fil).
\nSamt att ange bredden direkt i HTML-koden f\u00f6r tabellen (vilket man egentligen ska undvika).
\nMen det funkade i.o.m. att jag nu har bloggen via WordPress (som motor).<\/p>\n

Skapar jag en HTML-sida ’utanf\u00f6r’ bloggen (wordpress) s\u00e5 fungerar kodandet p\u00e5 ett helt annat vis.<\/p>\n

Sedan kr\u00e5nglar givetvis olika webbl\u00e4sare och olika sk plattformar; AppleOS, Windows, Android & Linux in.
\nSamt de olika fysiska formaten: Fasta bildsk\u00e4rmar, surfplattor & smartphones (mobiler).<\/p>\n

Ska jag forts\u00e4tta med just det h\u00e4r och det visar sig att det kr\u00e5nglar om jag vill l\u00e4gga till kolumner t.ex.
\nS\u00e5 m\u00e5ste jag \u00f6verv\u00e4ga att ge mig p\u00e5 hanteringen av ’div’:ar eller ’boxar’.
\nI slut\u00e4ndan ser de ut precis tabeller – om man vill det.
\nOch lyckas man g\u00f6ra r\u00e4tt s\u00e5 kan man f\u00e5 dem att bete sig tjusigt.<\/p>\n

Det som fr\u00e4mst skiljer HTML-tabeller och HTML-boxar \u00e4r att tabellerna placerar sig i den ordningen du l\u00e4gger in dem i koden (oftast…).<\/p>\n

Det g\u00f6r i.o.f.s. ’boxarna’ ocks\u00e5 – om du inte tilldelar dem egenskaper via CSS.<\/p>\n

En egenskap som st\u00e4ller till det extra \u00e4r: ’position’.
\nDen kan bl.a. ges egenskaperna: ’relative’ & ’absolute’ eller ’fixed’.<\/p>\n

Kan ju verka enkelt. Men beroende p\u00e5 hur m\u00e5nga boxar du har och vilken box du definierat som f\u00f6r\u00e4lderbox s\u00e5 ska det ibland vara s\u00e5 att f\u00f6r\u00e4lderboxen (parent) ska vara ’relativ’ eller ’absolut’ och s\u00e5 d\u00e5 tv\u00e4rt om i ’barnboxarna’ (child).<\/p>\n

En annan mots\u00e4gelse jag st\u00f6tt p\u00e5 \u00e4r att om du vill p\u00e5verka en box (div) och dess position till v\u00e4nstersidan (left) s\u00e5 ska du manipulera v\u00e4rdet i boxens v\u00e4rde f\u00f6r h\u00f6ger (right).<\/p>\n

Det \u00e4r v\u00e4ldigt mycket att s\u00e4tta sig in i – en djungel.
\nTur att jag bara programmerar f\u00f6r egen del – f\u00f6r mina behov.<\/p>\n

Och som slutkl\u00e4m: Vad avser skript s\u00e5 \u00e4r det inte bara JavaScript (js) som g\u00e4ller.
\nNejd\u00e5, det finns bl.a. ocks\u00e5: ’tcl’, ’vbscript’, ’json’ & jQuery.
\n\u00c4n s\u00e5 l\u00e4nge \u00e4r ’javascript’ standard om man inte anger annat.<\/p>\n

Hur-som, fr\u00e5n ’nu’ kan mina ’kroppsliga m\u00e4tningar’ studeras H\u00c4R<\/a>.<\/p>\n

Programmering (HTML & JavaScript)<\/b>
\nUppdateras numer h\u00e4r: HTML & JavaScript<\/a>.<\/p>\n

Funderar p\u00e5 om jag ska f\u00f6rs\u00f6ka mig p\u00e5 en pedagogiskt f\u00f6rtydligande i mina tabeller som i.o.f.s. kan inneb\u00e4ra ytterligare kr\u00e5ngel.<\/p>\n

Jag skulle vilja ha en tabell d\u00e4r ’rubrikerna’ syns hela tiden men kan r\u00f6ra sig i sidled och en ’rubrik’-kolumn till v\u00e4nster som ligger kvar n\u00e4r man kikar i tabellen horisontalt men f\u00f6ljer med n\u00e4r kollar vertikalt.
\nLiksom tv\u00e4rtom mot rubrikraden.<\/p>\n

Kuben <\/b>\"[Bild:\n<\/a>
\nUppdateras numer h\u00e4r: Kub-sidan<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

[not: publicerad: 230430] Sol – men lite kyligt Sjukgymnastiken Sjukskrev mig fr\u00e5n den idag ocks\u00e5. N\u00e5got lurt \u00e4r det i kroppen… \u2753 Ormar Tog en tur ut till mina jaktmarker och det visade sig att hustrun hade r\u00e4tt – inga … Forts\u00e4tt l\u00e4sa →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-15799","post","type-post","status-publish","format-standard","hentry","category-vardag"],"_links":{"self":[{"href":"https:\/\/blogg.ngn.nu\/index.php\/wp-json\/wp\/v2\/posts\/15799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogg.ngn.nu\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogg.ngn.nu\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogg.ngn.nu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogg.ngn.nu\/index.php\/wp-json\/wp\/v2\/comments?post=15799"}],"version-history":[{"count":1,"href":"https:\/\/blogg.ngn.nu\/index.php\/wp-json\/wp\/v2\/posts\/15799\/revisions"}],"predecessor-version":[{"id":15800,"href":"https:\/\/blogg.ngn.nu\/index.php\/wp-json\/wp\/v2\/posts\/15799\/revisions\/15800"}],"wp:attachment":[{"href":"https:\/\/blogg.ngn.nu\/index.php\/wp-json\/wp\/v2\/media?parent=15799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogg.ngn.nu\/index.php\/wp-json\/wp\/v2\/categories?post=15799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogg.ngn.nu\/index.php\/wp-json\/wp\/v2\/tags?post=15799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}