Tag archieven: HTML5

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 

  • voorbeelden van Zapier
    Voorbeelden van Zapier, zappen maar!

    We laten je hier twee voorbeelden van Zapier zien. Of beter: hoe je taken automatiseert door er Zaps van te maken.

  • hoe werkt Zapier
    Hoe werkt Zapier?

    Automatiseren met Zapier scheelt je een hoop overbodige tijd achter je computer, maar hoe werkt Zapier?

  • Automatiseren met Zapier: maak je digitale leven makkelijker

    Veel taken op een computer zijn te herleiden tot herhalingen. En herhalingen is iets waar een computer goed in is. Automatiseren met Zapier maakt het digitale leven een stuk makkelijker!

  • Hoe stel je het best en doelgericht vragen aan ChatGPT?
    Hoe stel je het best en doelgericht vragen aan ChatGPT?

    Door het slimmer formuleren en doelgericht vragen aan ChatGPT je betere antwoorden van ChatGPT. Maar hoe formulier je die ‘ideale vraag’? Leggen we hier alvast in beginsel uit.

  • 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…

De pijlers van het digitale web – HTML5 en CSS3 – op papier

Als je serieus aan de slag wilt gaan met het technisch bouwen van websites, dan is kennis van HTML5 en CSS3 en JavaScript onontbeerlijk.

Nu kan je de technieken voor HTML en CSS op heel veel digitale manieren leren; er zijn zát online tutorials en trainingen ! Maar het gros daarvan is in het Engels. Voor velen is dat misschien geen groot probleem (web-technieken zijn immers volledig Engelstalig georiënteerd). Maar er zijn ook veel mensen die het wel zo prettig vinden als een en ander op zijn minst in het Nederlands wordt beschreven en uitgelegd !

cover boek html css doolaardDe 5eeditie van het boek “HTML5 en CSS3” van Peter Doolaard voorziet daar uitstekend in. Lees die éérst, dan kan je daarna alles gaan nakijken en uitdiepen in allerlei handige online overzichten en hulpmiddelen.

Even wat achtergrond-informatie: anno 2019 bestaat het web 30 jaar. De eerste tien jaren waren woest en wild. Als gevolg daarvan heerste in het tweede decennium vooral moedeloosheid bij de grondleggers. Maar dankzij een hoognodige grondige ommezwaai (HTML5) is het web uit een diep dal gekrabbeld en floreert het nu als nooit tevoren. Lees verder De pijlers van het digitale web – HTML5 en CSS3 – op papier

Handboek HTML5 en CSS3: afspraken over webtalen

Handboek HTML5 en CSS3Het boek van de maand september is het Handboek HTML5 & CSS3, waarvan net de 4e bijgewerkte editie is verschenen. Deze maand publiceren we op dit blog een aantal voorproefjes uit deze 4e editie van dit Handboek HTML5 en CSS3. Dit voorproefje behandelt de afspraken voor de webtalen – HTML5 en CSS – waarmee websites en andere webtoepassingen worden gemaakt. Een interview met Peter Doolaard vind je HIER. De twee eerdere voorproefjes uit het boek HIER en HIER.(H.F.)

Afspraken over webtalen

Sinds 1994 wordt geprobeerd lijn te brengen in de talen waarmee websites (en andere webtoepassingen) worden gemaakt. Die talen zijn onder meer HypertextMarkup Language (HTML) en Cascading Style Sheets (CSS). Daarvoor is het World Wide Web Consortium, kortweg W3C, opgericht. In verschillende werkgroepen overleggen browserfabrikanten zoals Microsoft, Google, Mozilla enOpera. Omdat W3C ook allerlei andere webstandaarden beheert, vindt u onder de leden ook bedrijven als Nokia, Rabobank Nederland, Walt Disney Company en Motion Picture Association of America. Het doel van bijvoorbeeld de werkgroep Web Platform is afspraken maken over hoe een auteur in een webdocument aangeeft dat iets een hyperlink, een kop of een opsomming is, en hoe een browser daarmee zou moeten omgaan.
Lees verder Handboek HTML5 en CSS3: afspraken over webtalen

Peter Doolaard: ‘Er is eigenlijk geen goede wysiwyg-editor voor websites’

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 de zesde, bijgewerkte editie van het Handboek HTML en CSS leer je met beide webtalen werken. Je leert eerst hoe je de content markeert met HTML. Daarna maak je de onderdelen van de pagina op met CSS. Het uitgangspunt van dit handboek daarbij is dat je niet alleen leert dát dingen werken, maar vooral waaróm ze werken. We spraken in met Peter Doolaard, de auteur van het boek over de doelgroep van het boek en het nog steeds ontbreken van een goede wysiwyg-editor voor websites.
Lees verder Peter Doolaard: ‘Er is eigenlijk geen goede wysiwyg-editor voor websites’

Handboek HTML5 & CSS3, 4e editie

Handboek HTML5 & CSS3Het boek van de maand september is het Handboek HTML5 & CSS3, waarvan net de 4e bijgewerkte editie is verschenen. Het is geschreven door Peter Doolaard, die naast zijn boeken over HTML en CSS ook (mede)auteur is van o.a. het ExpertHandboek Windows 10. Deze maand publiceren we op dit blog een aantal voorproefjes uit deze 4e editie van dit Handboek HTML5 en CSS3.

Van alle technieken voor het maken van webpagina’s en webapps zijn HTML en CSS de belangrijkste. Zonder HTML geen webpagina’s en zonder CSS blijft het een kale boel. In deze vierde, bijgewerkte editie van dit handboek leer je omgaan met beide webtalen. Je leert eerst hoe je de content markeert met HTML zodat de paginastructuur klopt. Daarna maak je de onderdelen op de pagina op met CSS. Het uitgangspunt daarbij is dat je niet alleen leert dát dingen werken, maar vooral waaróm ze werken.