Tag archieven: Handboek HTML 5 en CSS

Tabellen maken in HTML5

Handboek HTML 5 en CSS, 6e editie

Als u ‘t wilt, dan behoort tabellen maken in HTML5 vanzelfsprekend tot de mogelijkheden, beter dan ooit zelfs. Hoe het werkt leg ik uitgebreid uit in mijn boek Handboek HTML 5 en CSS. Hieronder vast een intro!

Met de komst van HTML 5 kon de tabel weer worden gebruikt waarvoor hij is bedoeld: het weergeven van gestructureerde informatie. Mocht u net instappen: tabellen hebben jarenlang dienstgedaan als lay-outhulpmiddel, of beter: als het fundament, de wanden en het dak van websites. Met het volwassen worden van CSS en de groeiende mogelijkheden voor het maken van mooie, solide en flexibele lay-outs kon de tabel terug naar zijn oorsprong: geordende lijst, voor het leesbaar maken van een (groot) aantal feiten of gegevens, gewoonlijk enkel in namen en cijfers en zo gegroepeerd, dat men ze gemakkelijk kan overzien (Dikke Van Dale).

Tabellen kent u dus. In rijen en kolommen die elkaar kruisen en daarmee een raster van cellen vormen, wordt informatie geplaatst. Cijfers, tekst, afbeeldingen, hyperlinks, het kan allemaal in een tabel worden opgenomen (er gingen immers ooit complete webpagina’s in). Tabellen kunnen bijzonder complex zijn, met cellen die meerdere kolommen of meerdere rijen overspannen. In die zin zijn tabellen in HTML niet anders dan spreadsheets of tabellen in kantoorsoftware. Het verschil zit natuurlijk in de manier waarop u een tabel maakt. Daarover gaat dit hoofdstuk. U leert alles over <table>, <tr>, <td> en al die andere elementen die van uw data een keurige tabel maken.

De structuur van een HTML-tabel

Een tabel kan nog verrassend veel verschillende elementen bevatten, als u alle mogelijkheden benut. Lang niet alle elementen zijn verplicht en diverse sluittags mogen worden weggelaten, waardoor een tabel zo eenvoudig kan zijn als het volgende voorbeeld van een tabel met één rij en één kolom:

<table>
       <tr><td>Tabel met 1 cel
</table>

Voor een beter overzicht adviseren we echter in een tabel ook alle sluittags te gebruiken. Het kan bovendien helpen om de elementen op afzonderlijke ingesprongen regels te typen. De aanbevolen notatie ziet er dan zo uit:

<table>
        <tr>
                 <td>Tabel met 1 cel</td>
        </tr>
</table>

Zo eenvoudig is een tabel natuurlijk nooit. We bekijken de opbouw van een tabel aan de hand van iets realistischer voorbeeld: een overzicht van HTMLversies:

tabellen in HTML5

U ziet in deze HTML-code drie belangrijke tabelelementen: <table>, <tr> en <td>. In de afbeelding is te zien dat dit overzicht nog niet erg duidelijk is, doordat een rand of andere visuele aanwijzingen ontbreken. Ook staat de inhoud nogal dicht op elkaar. Maar u weet intussen: dat is
opmaak en hier gaat het over structuur.

De tabel heeft niet alleen visueel een probleem. Er zijn weliswaar rijen en kolommen, maar de samenhang ontbreekt en dat is een probleem voor mensen met een visuele beperking. De schermleessoftware heeft meer aanknopingspunten nodig. De elementen die daarvoor kunnen zorgen komen in de volgende paragrafen voorbij.

tabellen in HTML5
Een tabel van twee rijen en negen kolommen, maar erg overzichtelijk is het nog niet.

De basis: <table>

De basis van elke tabel wordt gevormd door het element <table>. Het is de ancestor (voorouder) van alle andere tabelelementen. <table> heeft alleen de globale attributen.

In een tabel kunnen nogal wat andere elementen worden gebruikt. Ze zijn niet allemaal verplicht, maar wel noodzakelijk voor toegankelijke tabellen. En als u ze gebruikt, is de volgorde belangrijk. De juiste volgorde is:

tabellen in HTML5

Handboek HTML 5 en CSS, 6e editie

Handboek HTML 5 en CSS, 6e editie

HTML en CSS zijn twee onmisbare technieken voor het maken van webpagina’s en webapps. Zonder HTML zijn er geen webpagina’s en zonder CSS zien ze er wel erg kaal uit. In deze zesde, bijgewerkte editie van het Handboek HTML 5 en CSS leert u met beide webtalen werken. U leert eerst hoe u de content markeert met HTML. Daarna maakt u de onderdelen van de pagina op met CSS. Het uitgangspunt daarbij is dat u niet alleen leert dát dingen werken, maar vooral waaróm ze werken.

U krijgt uitleg over het structureren van HTML-documenten en het markeren van alle onderdelen: paginakop, artikelkoppen, tekst, lijsten, hyperlinks, afbeeldingen, video en audio, formulieren en tabellen. Een goede paginastructuur in HTML is de beste garantie voor een geslaagde lay-out en opmaak met CSS. 

De tweede helft van het boek behandelt het maken van lay-outs en het opmaken van de onderdelen met CSS. Er wordt uitgebreid ingegaan op responsive design met alle technieken die CSS daarvoor biedt: gridlay-out, flexbox, multi-column en positionering.

U leert hoe u lettertypen downloadt, tekst opmaakt, navigatiemenu’s vormgeeft, kleur gebruikt en achtergronden maakt. Ook het werken met CSS-functies en het maken van overgangen, animaties en transformaties in 2D en 3D komen aan bod. 

Het boek is uitgebreid met uitleg over toegankelijkheid, container queries, een nieuw hulpmiddel voor responsive design, en cascade layers, voor meer controle over de cascade. 

Op handboek-html-css.nl vindt u code en (interactieve) voorbeelden.

Dit leerboek en naslagwerk geeft een stevige ondergrond voor het werken met de technieken die de basis vormen van modern webdesign. 

Website: handboek-html-css.nl 

  • Zonder coderen taken automatiseren met Zapier!
    Zonder coderen taken automatiseren met Zapier!

    Ontvang je wel eens een antwoord op een webformulier en stuur je dat handmatig door naar de persoon die het antwoord moet afhandelen? Heb je wel eens een chatbot gebouwd, of een webpagina? Ongetwijfeld deed je dat handmatig, of moest je ervoor programmeren, hetzij in HTML of in JavaScript. Dat kan anders, met Zapier! Zapier…

  • Zoekmachines en Chatbots in het AI-tijdperk: Wie heeft de meeste potentie?
    Welke zoekmachine of Chatbot heeft in dit AI-tijdperk de meeste potentie?

    De enorme opkomst van AI heeft ook enorme invloed op de mogelijkheden van zoekmachines. Het was altijd Google wat de klok sloeg, maar nu zijn er andere kapers op de kust. Je hebt Bing/Copilot van Microsoft, dat werkt met AI en Bard (inmiddels Gemini), dat met Google AI werkt. Welke zoekmachine je op dit moment…

  • koelen van je Raspberry Pi
    Koelen van je Raspberry Pi

    Met de komst van de RPI 4 en helemaal de RPI 5 ontkom je niet meer aan het koelen van je Raspberry Pi.

  • Raspberry Pi op batterijen
    Raspberry Pi op batterijen

    Een Raspberry Pi op batterijen laten draaien maakt de kleine krachtpatser nóg breder inzetbaar. In het veld bijvoorbeeld. Al dan niet af en toe bijgetankt door een zonnepaneel.

  • De beste USB-C kabels voor dataoverdacht en opladen
    Vind de juiste USB-C kabels voor dataoverdracht én opladen!

    Vanwege mijn nieuwe – tweedehands – Mac Studio boog ik me weer eens over het USB-C-kabel- en poortenprobleem. Wat is een goede USB-C-kabel? Wat is de snelheid van de USB-C-poorten? Op de Mac Studio heb je lekker veel USB-C-poorten – zes om precies te zijn – en ook nog twee USB-A-poorten. De kabels die je…

  • Nieuw in Photoshop Elements 2024
    Dit is er nieuw in Photoshop Elements 2024

    Elk jaar maakt Adobe een nieuwe versie van Photoshop Elements. We zijn nu aangekomen bij Photoshop Elements 2024. Photoshop Elements lijkt het kleine broertje van grote broer Photoshop, maar onderschat Elements niet. Handelingen die in de grote Photoshop ingewikkeld zijn, zijn in Elements teruggebracht tot eenvoudige handelingen. Ook worden er regelmatig nieuwe mogelijkheden uitgeprobeerd die…

Wat is responsive design?

Om een webpagina op elk schermformaat prettig leesbaar te houden dient een website-ontwikkelaar daar rekening mee te houden. Maar wat is responsive design nou precies? Ga ik uitgebreid op in in mijn boek Handboek HTML 5 en CSS, hieronder lees je alvast het antwoord op de vraag!

Een webpagina moet op elk schermformaat bruikbaar zijn. Hij hoeft er niet altijd hetzelfde uit te zien (dat kan ook niet), maar de informatie moet in het scherm passen en leesbaar zijn, knoppen en links moeten groot genoeg zijn om erop te kunnen tikken en formulieren moeten bruikbaar zijn, om maar een paar dingen te noemen. Omdat een webontwikkelaar niet weet of de bezoeker een telefoon, een tablet, een laptop of een bureaucomputer gebruikt, moeten er verschillende versies van het ontwerp worden gemaakt. Niet precies op maat voor een bepaalde schermgrootte, maar met overgangen naar een andere lay-out op punten waar het ontwerp niet meer klopt (‘breekt’).

Lees verder Wat is responsive design?

Wat is CSS?

HTML is tegenwoordig nagenoeg onlosmakelijk verbonden met CSS, maar wat is CSS nou precies en wat kun je ermee? Dat leg ik uit in mijn Handboek HTML 5 en CSS.

CSS is de afkorting van Cascading Style Sheets, in het Nederlands soms ook trapsgewijs opmaakmodel genoemd. Het begrip cascading/trapsgewijs is uiteraard een belangrijk kenmerk en dat wordt hierna uitgelegd. CSS is de opmaaktaal voor HTML (en XHTML, XML). Het definieert welk lettertype wordt gebruikt, in welke grootte en met welke kleur, of er een achtergrondkleur of achtergrondafbeelding is, hoeveel ruimte er tussen elementen moet zijn enzovoort. Alles (of bijna alles) wat u aan opmaak kunt bedenken, kan met CSS worden gemaakt. CSS wordt beheerd door het World Wide Web Consortium (W3C, waarover meer informatie in ‘t begin van mijn boek is te vinden)

Lees verder Wat is CSS?

Hulpmiddelen voor ontwikkeling van HTML en CSS

Als u zelf wilt gaan stoeien met webcode, dan zijn hulpmiddelen voor ontwikkeling van HTML en CSS natuurlijk onontbeerlijk. Die hoeven niet eens geld te kosten, zo laat ik zien in mijn Handboek HTML 5 en CSS.

Om webpagina’s te kunnen schrijven, hebt u geen bijzondere of dure software nodig. In theorie is elke tekstverwerker (editor) waarmee tekst als kale ASCIItekst kan worden opgeslagen geschikt. Kladblok (voor Windows) of TekstEditor/SimpleText (voor Mac) voldoet al! Maar voor een comfortabeler leven als webdeveloper zijn er ook tal van gespecialiseerde programma’s beschikbaar. Veel ervan zijn gratis.

Lees verder Hulpmiddelen voor ontwikkeling van HTML en CSS

Afspraken over webtalen

Handboek HTML 5 en CSS, 6e editie

Om internet echt bruikbaar te maken waren (en zijn) afspraken over webtalen als html en CSS noodzakelijk. Hoe dat geregeld werd en wordt lees je in dit artikel, afkomstig uit mijn Handboek HTML 5 en CSS.

De ontwikkeling van HTML 5 begon al in 2007. Sinds 2011 is het beschikbaar in de webbrowsers. De specificatie was toen nog volop in ontwikkeling, maar de belangrijkste elementen waren al omarmd door de gemeenschap van webbouwers en door browserfabrikanten. In 2014 heeft de beheerder van de webtalen, het World Wide Web Consortium (W3C) de specificatie ‘definitief’ vastgesteld (in W3C-termen is het dan de aanbevolen specificatie, gelabeld als recommendation). Definitief staat niet voor niets tussen aanhalingstekens, want het werk aan de specificatie gaat gewoon door. Het betekent alleen dat die versie wordt bevroren en dat het werk verder gaat in de volgende versie. Die kwamen er in 2016, en zelfs twee keer in 2017.

Daarna is de ontwikkeling van de HTML-specifcatie overgedragen aan een andere organisatie: WHATWG. Die doet niet aan versienummers en werkt dus dagelijks aan HTML, the living standard. Elke revisie bevat kleine veranderingen. Vaak zijn het aanvullingen en verbeteringen gebaseerd op hoe HTML wordt gebruikt en op reacties uit de gebruikersgemeenschap. Soms wordt een element afgekeurd (omdat het nauwelijks wordt gebruikt) of verandert de toepassing ervan. Breaking changes zijn in elk geval niet te verwachten, omdat het web nu eenmaal niet mag ‘breken’.

afspraken over webtalen
HTML Living Standard, beheerd door WHATWG.
Lees verder Afspraken over webtalen