Tabel voorbereiden met reset.css

In deze video behandelen we de table properties.

Een table is een block-level element en verdraagt standaard geen andere elementen, op de regel, naast zich.

Voordat je de inhoud van de tabel, zoals de tekst, de cellen, geplaatste afbeeldingen etcetera gaat vormgeven.

Is het verstandig om eerst de algemene eigenschappen voor de layout en de weergave van de tabel in te stellen.

Als je deze namelijk niet specificeert in een css stijl.

Dan worden hiervoor gewoon de default waarden aangehouden.

Voordat we gaan beginnen met de table-properties,

Gaan we eerst weer even kijken naar de html structuur van een tabel.

Een tabel wordt gedefinieerd met de html elementen table en einde table.

Vervolgens bestaat een tabel uit een aantal rijen en kolommen.

De rijen worden aangegeven met table row en dan einde table row.

En binnen een rij staan één of meerdere kolommen.

En dat structureer je met 'td' en '/td'. Boven de kolommen kun je gebruik maken van een table-header.

Dit is een titel die je boven de kolom plaatst.

Met de 'caption' kun je een titel aan de hele tabel geven.

En ondanks dat deze zich bevindt binnen de table elementen.

Wordt de 'caption' altijd buiten de tabel geplaatst.

Aan deze pagina is nog geen enkele vormgeving verbonden.

Als ik bovenin mijn 'head' kijk, dan zijn hier geen stijlbladen aan verbonden.

Ook het html element 'table' is niet voorzien van attributen die de vomgeving bepalen.

Dus in het venster waarin ik de browser heb geopend.

Wordt de tabel weergegeven zoals deze standaard door een browser wordt vertaald.

Voor het vormgeven van de tabel gaan we een css bestand aanmaken.

Dat kan via Bestand > Nieuw. Dan kies je voor paginatype 'css' en klik je op 'Maken'.

Zorg ervoor dat je dit bestand opslaat in de local root folder.

Ga naar Bestand > Opslaan als... En ik noem het bestand 'opmaak.css'. En ik bewaar deze in de juiste local root folder.

Dan moet dit externe stijlblad nog gekoppeld worden aan mijn html pagina.

Dus ik keer terug naar de index.html.

En plaats bovenin de head de link naar dit stijlblad.

Link en dan met href="" en daartussen dan de route en de naam van mijn document.

En als ik kijk in mijn bestanden venster, dan staat direct naast de index, de opmaak.css.

Dus het voldoet om hier te typen 'opmaak.css'.

Vervolgens moet ik nog het 'type' aangeven.

En het type=" ". En daartussen plaats ik dat text/css.

Ook de relatie moet ik nog aangeven. en de relatie is een 'Stylesheet'.

Met media=" ", geef ik aan wanneer dit stijlblad gebruikt moet worden.

En ik wil dat als mensen met een beeldscherm deze pagina bekijken.

Dat dit stijlblad daarvoor bedoeld is.

En de verdere vormgeving van deze pagina ga ik schrijven in dit externe stijlblad.

BEwaar de html pagina en activeer het externe bestand 'opmaak.css'.

Ik kan nu in het voorbeeld van de browser,

niet goed zien wat de rijen en kolommen van deze tabel zijn. Om dat iets duidelijke te maken.

Plaats ik nu een stijl opdracht voor de hele table.

Accolades openen en sluiten. En ga ik de tabel omlijnen met een rand.

En dat doe ik met de opdracht 'border' en de waarde 'px', dan 'solid' voor een egale lijn en de kleur 'black'.

Ik bewaar deze stijl opdracht en bekijk het resultaat in de browser.

En je ziet een lijn om de tabel verschijnen.

Ondanks dat de 'caption' zich bevindt binnen het element 'table' wordt deze dus buiten de tabel geplaatst.

Als ik ook de rijen en kolommen zichtbaar wil maken, dan breid ik deze css stijl uit met, komma 'table data'.

Bewaar opnieuw het document en bekijk het eindresultaat in de browser.

En nu worden ook de afzonderlijke cellen voorzien van een omlijning.

Dit is nu een mooi uitgangspunt om te kijken hoe een niet gestuurde en niet vormgegeven tabel zich standaard gedraagt in de browser.

Ik keer terug naar de broncode van de pagina en bekijk opnieuw de elementen waaruit deze tabel is opgebouwd.

Allereerst de 'caption'. Deze wordt dus buiten de tabel geplaatst maar staat gecentreerd, dat is dus een default vormgeving.

Dan de table headers, de naam, straat en plaats. Deze worden ook gecentreerd in de kolommen.

En worden vet weergegeven.

De overige teksten en table data's worden standaard liinks uitgelijnd.

De meeste webdesigners gebruiken een 'reset.css'.

Aan dit document is nu alleen nog maar ons eigen stijlblad verbonden.

Ik wil kijken wat een 'reset' zou doen met de weergave van deze tabel.

In deze training maken we gebruik van de 'rest.css' van 'meyerweb.com'.

Deze biedt op zijn website de code aan voor de reset.

En deze kun je hier simpelweg vandaan kopiëren.

En in een eigen css stijlblad plakken en verbinden aan je webpagina.

Als ik kijk in mijn bestanden venster, dan zie ik dat er al een 'reset.cs' aanwezig is.

Deze kan je gebruiken. Of je kunt de code van de website van 'meyerweb.com' kopiëren en in een stijlblad plakken.

Ik kopieer nu deze code en aangezien cascading style sheets overerven.

Wil ik eerst de reset laten inlezen, daarna mijn eigen opmaak.css.

En daarna wordt pas de inhoud van mijn pagina ingelezen.

Dus ik plak hier de link. en dan hoef ik alleen nog maar de naam te wijzigen in 'reset.css'.

Ik bewaar dit bestand. En bekijk een voorvertoning weer in de browser.

En dit levert al een ander beeld op.

Ik activeer het stijlblad 'reset.css'.

De witruimte die nu verdwenen is die zijn in de reset namelijk op gezet mate 'margin' en 'padding'.

De border wordt wordt standaard ook op gezet. Maar in een later stijlblad 'opmaak.css'.

Hebben wij deze overschreven door voor de tabel en de table data wel een border op te gevn.

De tekst van de 'caption' en van de table headers staan nog steeds gecentreerd.

Dat kan ik ook teruglezen omdat in de reset nergens een text-align wordt aangegeven.

Dus stel dat je liever de teksten linkslijnend wilt hebben?

Dan kan je zelf ook de reset uitbreiden met bijvoorbeeld de opdracht 'text-align:left'. Als standaard waarde.

Bekijk opnieuw een voorbeeld in de browser. En nu staan ook de caption en de headers linkslijnend.

Ik keer terug naar mijn broncode.

De breedte van de kolommen en de breedte van de totale tabel wordt bepaald door de inhoud.

En de beschikbare ruimte in het browser venster.

Als ik bijvoorbeeld in deze cel 'schildwoude en nabijgelegen dorp' typ.

En ik bekijk opnieuw een voorvertoning in de browser.

En als voorbeeld maak ik ook even een naam veel langer. '-van Damswouden'

En bewaar en bewaar opnieuw een voorverrtoning.

Dan zie je dat de browser probeert zo goed mogelijk de tabel binnen de beschikbare ruimte te plaatsen.

En daarom dus ook zinnen die niet passen naar een volgende regel gaat verschuiven.

En op het moment dat ik de browser venster breder maak, dan past de tabel zich de hele tijd aan.

Nu we weer enigszins bekend zijn met de structuur van de tabel.

Maar ook de standaard weergave van een tabel in de browser.

Gaan we verder met het sturen en vormgeven van deze table met behulp van css stijlen.