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 

  • Wat is WordPress?
    WordPress: het essentiële CMS voor website-ontwikkeling

    Je hebt vast de naam WordPress wel eens op een website voorbij zien komen, maar: wat is WordPress nou eigenlijk precies?

  • laat ChatGPT voor je programmeren
    Laat ChatGPT voor je programmeren

    Programmeren is een edele kunst die… bla bla bla. Laat ChatGPT voor je programmeren en iedereen kan z’n ideeën in code om laten zetten!

  • tabellen in HTML5
    Tabellen maken in HTML5

    Als u ‘t wilt, dan behoort tabellen maken in HTML5 vanzelfsprekend tot de mogelijkheden, beter dan ooit zelfs.

  • wat is responsive design
    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?

  • wat is CSS
    Wat is CSS?

    HTML is tegenwoordig nagenoeg onlosmakelijk verbonden met CSS, maar wat is CSS nou precies en wat kun je ermee?

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