Dit is beter, maar onze tabel wordt tegen de linkerrand van het venster gedrukt, net als de tekst erin. Laten we dit oplossen door nog drie parameters toe te voegen:
Let op: de tafel heeft dubbele randen. Als u specificeert cellenafstand = "0", dan zullen de grenzen de gebruikelijke vorm aannemen:
Resultaat:
Over het algemeen zijn twee parameters verantwoordelijk voor grenzen:
- kader- stelt het type frame rond de tafel in en kan de volgende waarden aannemen:
- leegte- geen lijst,
- boven- alleen het bovenframe,
- onderstaand- alleen onderframe,
- zijkant- alleen de boven- en onderframes,
- versus- alleen linker- en rechterframes,
- lhs- alleen linkerframe,
- rhs- alleen rechterframe,
- doos- alle vier de delen van het frame.
- regels- stelt het type interne tabelgrenzen in en kan de volgende waarden aannemen:
- geen- er zijn geen grenzen tussen cellen,
- groepen- grenzen alleen tussen groepen rijen en groepen kolommen (zal iets later worden besproken),
- rijen- alleen grenzen tussen lijnen,
- col- grenzen zijn alleen tussen kolommen,
- alle- toon alle randen.
Met behulp van deze parameters kunt u de grenzen instellen zoals u dat wilt. Hier geven we slechts één voorbeeld, experimenteer er zelf mee. Resultaat:
Opgemerkt moet worden dat randen in verschillende browsers enigszins anders worden weergegeven.
HTML-tags tr en td
Tabellen worden rij voor rij gevormd. Daarom breiden de parameters die zijn gespecificeerd in regel (tr) hun effect uit naar alle cellen (td) van de regel. Tekenreeksen kunnen drie parameters hebben:
- uitlijnen- lijnt tekst in cellen horizontaal uit, kan waarden aannemen: links (rechts), rechts (links), midden (midden),
- vallijn- lijnt tekst in cellen verticaal uit, kan waarden aannemen: omhoog (boven), omlaag (onder), gecentreerd (midden),
- bgkleur- stelt de kleur van de lijn in.
Laten we eens kijken naar een voorbeeld: - breedte- stelt de kolombreedte in (in pixels of als percentage, waarbij 100% de tabelbreedte is),
- hoogte- stelt de hoogte van de cel in, en alle cellen in dezelfde rij krijgen deze hoogte.
Laten we bijvoorbeeld iets toevoegen aan onze code, in de tags
deze parameters | | 1
|
2
|
3
|
|---|
Resultaat:
Houd er rekening mee dat als u de breedte en hoogte niet instelt, de tabel wordt gevormd op basis van de inhoud (dit was het geval in de vorige voorbeelden).
Deze les is voorbij, oefen met het maken en ontwerpen van tabellen. Deze vaardigheden heb je nodig in de volgende les, waar we tabellen met complexe structuren gaan maken.
HTML-tabelranden kunnen eenvoudig worden gewijzigd met behulp van CSS-tools. Hun weergave is geconfigureerd met behulp van de eigenschappen: samenvouwen en spatiëring.
Gebruik de eigenschapsgroep border om de tabelweergave te bewerken. Hiermee kunt u de breedte, kleur, aan-/afwezigheid van randen, hun stijl en andere weergavefuncties aanpassen.
Basisprincipes
Een tabel zonder stijl verschijnt als gestructureerde tekst zonder randen. Tabel in html is gebouwd met behulp van tags:
- tr voor strijkers;
- th voor kopjes;
- td voor kolommen.
| Hoofd |
Hoofd |
Hoofd |
| Cel |
Cel |
Cel |
| Cel |
Cel |
Cel |
De tekstgrootte en het lettertype, de achtergrond en de inspringingen vanaf de rand van het browservenster worden in css in de body-container ingesteld.
Lichaam ( lettertypefamilie: Helvetica, Sans-serif; lettergrootte: 5vw; kleur: zwart; achtergrondkleur: rgba(228, 228, 245); opvulling: 20vh; )
Stijlen worden gebruikt om het uiterlijk van de matrix te ontwerpen. Met de eigenschap border kunt u de dikte, het type en de kleur van de rand van een html-tabel opgeven.
(randbreedte: 2vw; randstijl: gestippeld; randkleur: hemelsblauw; )
Afgekort als rand: breedtestijlkleur.
( rand: 1px effen #4c6ea1; )
Voor een specifieke zijde wordt dit ingesteld met behulp van de sjabloon border-top(/right/bottom/left)-style(/color/width/radius).
(rand-top-kleur: donkerblauw; )
Opvulling stelt de opvulling in de cel in, van de tekst tot het frame, terwijl tekstuitlijning de uitlijning bepaalt.
Stijlen worden gebruikt om het uiterlijk van een tafel te ontwerpen. Met de eigenschap border kunt u de dikte, stijl en kleur van de rand opgeven. Opvulling bepaalt de inspringing van de tekst, tekstuitlijning stelt de uitlijning in.
Th, td (rand: 1vw effen #4c6ea1; opvulling: 1vw; tekst uitgelijnd: links; )
Geen kaders
Het is niet nodig om border te gebruiken of de border-color, -width en -style apart op te geven, aangezien je een HTML-tabel zonder randen kunt maken met een volledig ontwerp. De volgende code stelt bijvoorbeeld de achtergrond, opvulling en afgeronde hoeken in (de laatste matrix zonder binnen- of buitenlijnen).
Tabel ( tekst uitlijnen: links; achtergrondkleur: rgba(228, 228, 245); straal rand-linksboven: 15em 1em; straal rechtsonder rand: 15em 1em; ) td, th ( opvulling: 1,5vw)
Door voor elke cel een achtergrond in te stellen, kan een tabel zonder randen eruit zien alsof deze er wel een heeft.
Tabel ( tekstuitlijning: links; achtergrondkleur: rgba(228, 228, 245); breedte: 70vw; randafstand: 2vh 2vh; ) td, th ( opvulling: 1,5vh; ) td ( achtergrondkleur: rgba (247, 247, 255);
U kunt de randen van de HTML-tabel verwijderen en de interne randen laten. Om dit te doen, stellen ze bijvoorbeeld de border-eigenschap voor cellen in (tr), stellen ze gemeenschappelijke frames in op aangrenzende zijden (collapse) en verbieden ze het tekenen van lijnen rond de matrix (verborgen). De laatste actie verbergt de cellijnen, die, wanneer samenvouwen is ingeschakeld, op dezelfde plaats verschijnen als de buitenranden van de tabel.
Tabel (tekst uitlijnen: midden; rand samenvouwen: samenvouwen; achtergrondkleur: rgba(228, 228, 245); randradius: 50%; breedte: 29vh; hoogte: 10vh; randstijl: verborgen; ) td (opvulling: 1,5vh; rand: 0,5vh effen zwart;)
Samenvouwen en scheiden
Een van de belangrijkste tabeleigenschappen in HTML, border-collapse, bepaalt hoe celranden worden weergegeven. De eigenschap kan een van de volgende drie waarden hebben: samenvouwen, scheiden, overnemen.
tabel (rand-samenvouwen: samenvouwen; )
De standaardwaarde is ingesteld op gescheiden, zodat elke cel zijn eigen rand heeft. Dankzij samenvouwen kunt u de cellijnen samenvoegen, zodat hun inhoud door één frame wordt gescheiden. De afbeelding toont de drie hierboven beschreven grenstoestanden: zonder stijlen; met samenvouwen van randen ingesteld op standaard; met de waarderand samengevouwen, waardoor er een gemeenschappelijke lijn tussen de cellen overblijft.
Dubbele kozijnen
Met de eigenschap samenvouwen kunt u de randen van cellen in een HTML-tabel zowel onafhankelijk van elkaar als gemeenschappelijk maken. Vaak wordt hierbij gebruik gemaakt van de eigenschap border-spacing, die de afstand tussen celframes regelt. U kunt zowel de horizontale als de verticale afstand opgeven.
Tafel (randafstand: 0,5vw 1vw;)
De eerste waarde geeft de afstand tussen cellen horizontaal aan, de tweede - verticaal. Als er voor de tabel zelf een frame is opgegeven, wordt de afstand daarvan tot de cellen ook gevormd door de spasing-eigenschap, maar deze kan ook worden beïnvloed door de opvulling van de matrix. In gevallen waarin de matrix een achtergrond heeft, wordt de vrije ruimte tussen de cellen ermee gevuld.
Tabel ( randafstand: 0,5vw 1vw; rand: 1vw effen #4c6ea1; opvulling: 1vw; achtergrondkleur: zwart; ) td, th ( rand: 1vw effen #4c6ea1; opvulling: 0.3vw; tekst uitgelijnd: links; achtergrondkleur: wit)
Lege cellen
Als een tabel geen samengevoegde celranden heeft, maakt de eigenschap empty-cells het mogelijk de cellijnen en achtergrond weer te geven, die als leeg worden beschouwd (gemarkeerd als zichtbaar of zonder tekens hebben). Als u de randen en achtergrond van elke cel wilt weergeven, stelt u de eigenschap in op weergeven.
tabel (lege cellen: show; )
De verbergwaarde verbergt de randen en achtergronden van lege blokken. Als alle cellen in een rij leeg zijn, heeft de rij een hoogte van nul en slechts één verticale lijn.
Tabel ( randafstand: 0,5vw 1vw; rand: 0,1vw effen #4c6ea1; opvulling: 0,5vw; achtergrondkleur: rgba(33, 31, 171, 0,12); lege cellen: verbergen; ) td, th (rand : 0,3vw effen #4c6ea1; tekst uitlijnen: links;
Attribuut
Om grenzen toe te wijzen aan groepen elementen (cellen, kolommen, rijen, groepen rijen of kolommen), is er het attribuut regels. De waarde ervan wordt rechtstreeks in de html in de tabeltag geschreven.
Hiermee kunt u selectief de kaders van elementen tekenen. Het is voldoende om het attribuut in de html op te geven, hierdoor ontstaan er interne lijnen tussen de cellen. De html-tabelrand moet handmatig worden opgegeven in css.
| Hoofd |
Hoofd |
Hoofd |
| Cel |
Cel |
Cel |
| Cel |
Cel |
Cel |
tabel (rand bovenaan: 1vw effen #486743; lettergrootte: 5vw; ) th, td ( opvulling: 2vw; )
De eerste afbeelding toont dus de pure werking van het attribuut zonder extra frame-ontwerp via tafel. Op de tweede afbeelding is de bovenste regel voltooid, die volgens de instructies is geïnstalleerd.
Tafel (rand boven: 1vw doted #486743; )
Een attribuut kan meerdere waarden hebben. Met All worden randen tussen cellen gemaakt met een randdikte van 1px. Cols creëert lijnen tussen kolommen, rijen - tussen rijen wist geen enkele de randen. De afbeelding toont voorbeelden van een tabel met de waarden all en rows.
U kunt de kleur van de celranden en de breedte van het frame wijzigen wanneer u het regelsattribuut gebruikt met rand en randkleur.
Stijlconflicten
Cellen, rijen, kolommen en elementgroepen kunnen hun eigen randwaarden krijgen. Ze kunnen echter in drie parameters verschillen: stijl, dikte en kleur.
In de samenvouwmodus ontstaan stijlconflicten. Vanwege het feit dat één rand onderworpen kan zijn aan de regel van twee verschillende cellen, ontstaat het probleem bij het kiezen van een stijl die voorrang heeft. Zoals E. Malchuk schrijft: de meest ‘pakkende’ (behalve verborgen) wint.
- Als voor een van de elementen de eigenschap border-style van de betwiste rand is ingesteld op verborgen, wint die stijl. Verborgen heeft de hoogste prioriteit.
- Het kleinste gewicht is geen. Het schrijft ook voor dat de regel niet mag worden weergegeven, maar dat alle elementen voor die regel deze (geen) regel moeten hebben om de instructie uit te voeren.
- Tussen dunne en dikke grenzen hebben dikke grenzen een grotere prioriteit.
- Met dezelfde frames, maar verschillende stijlen, wint dubbel effen altijd, gevolgd door effen, gestippeld, gestippeld.
- Als de enige verschillen kleuren zijn, is het uiterlijk van het kleinste onderdeel altijd hoger (celversiering heeft een hogere prioriteit dan rijen en rijen zijn hoger dan tabellen).
Conflictillustratie
Het is gemakkelijk om het stijlconflict te illustreren met behulp van de reeds besproken tabel. Het volstaat om een paar klassen aan de cellen toe te voegen en het ontwerp ervoor te specificeren. HTML heeft de vorm:
| Hoofd |
Hoofd |
Hoofd |
| Cel |
Cel |
Cel |
| Cel |
Cel |
Cel |
De bijbehorende css.
Hoofdtekst ( lettertypefamilie: Helvetica, Sans-serif; lettergrootte: 5vw; kleur: zwart; marge: 0; breedte: 80vw; achtergrondkleur: wit; opvulling: 3vw; ) tabel ( achtergrondkleur: rgba(33 , 31, 171, 0,12); opvulling: 0,5vw; rand-afstand: 0,5vw; randstijl: verborgen; .tweede_cel (rand: 0.01vw effen #4c6ea1; ) .derde_cel (rand: 0.01vw dubbel rood; )
Framestijlen
Het randontwerp kan voor elke zijde van de cel afzonderlijk worden ingesteld. Om dit te doen, volstaat het om niet één waarde in de randstijl op te geven, maar er vier op te sommen, die overeenkomen met de zijkanten van de cel.
Th, td ( opvulling: 1vw; tekstuitlijning: links; randbreedte: 0,5vw; randkleur: donkerrood; randstijl: gestippeld; ) .seven ( randbovenkleur: hemelsblauw; randbovenstijl : effen; rand-rechts-breedte: 2vw; rand-onder-stijl: gestippeld; rand-links-stijl: verborgen )
U kunt gegevens op één regel opgeven door één tot vier verschillende waarden op te geven. Traditioneel wordt elk een instructie voor een van de partijen.
- Als u twee waarden instelt, is de eerste verantwoordelijk voor de onder- en bovenrand, de tweede voor links en rechts.
- Van de drie is de eerste verantwoordelijk voor de bovenkant, de tweede voor links en rechts, en de derde voor de onderste regel.
- Vier waarden definiëren op unieke wijze elk van de lijnen, beginnend vanaf de bovenkant, met de klok mee naar links.
U kunt ook het ontwerp van de celgrenzen specificeren door eenvoudigweg gegevens voor elke zijde te definiëren, zoals hierboven weergegeven.
Er zijn in totaal tien framestijlen. Ze veranderen allemaal de regel of verwijderen deze:
- geen - geen grens;
- verborgen - strenger geen, blokkeert de verschijning van de eigenschap (in een conflictsituatie);
- gestippeld - gemaakt van stippen;
- onderbroken - gestippeld;
- stevig - stevig;
- dubbel - dubbel massief;
- groef - het frame lijkt in het oppervlak te zijn gedrukt;
- nok - convexe lijn;
- inzet - in feite gedraagt het zich voor één zijde van het element als een rand, als het op het hele element wordt toegepast, zijn de boven- en linkerkant gearceerd en zijn de onder- en rechterkant gemarkeerd;
- vanaf het begin - gedraagt zich als een groef wanneer toegepast op één zijde van een element, het verduistert de onderkant en de rechterkant, waardoor de bovenkant en de linkerkant lichter worden.
Eén van de stijlen wordt op elk van de cellen toegepast (op de boven- en linkerkant). Om ervoor te zorgen dat ze niet met elkaar concurreren, krijgen de ‘zwakste’ de hoogste waarden.
Tabel ( achtergrondkleur: rgba(33, 31, 171, 0.12); opvulling: 0.5vw; rand samenvouwen: samenvouwen; rand: 0.3vw effen zwart; ) th, td ( opvulling: 1vw; tekst uitlijnen: links; ) .one ( border-top: verborgen; border-left: verborgen; ) .two ( border-top: 0.4vw double #4c6ea1; border-left: 0.4vw double #4c6ea1; ) .three ( border-top: 0.5vw ononderbroken #4c6ea1; rand-links: 0,5vw ononderbroken #4c6ea1; .four (rand-boven: 0,7vw gestippeld #4c6ea1; rand-links: 0,7vw gestippeld #4c6ea1; ) .five (rand-boven: 0,8vw gestippeld # 4c6ea1 ; rand-links: 0,8vw gestippeld #4c6ea1; .six (rand-boven: 0,9vw nok #4c6ea1; rand-links: 0,9vw nok #4c6ea1; ) .seven (rand-boven: 1vw begin #4c6ea1; rand-links : 1vw begin #4c6ea1; ) .eight ( rand-boven: 1.1vw groef #4c6ea1; rand-links: 1.1vw groef #4c6ea1; ) .nine ( rand-boven: 1.2vw inzet #4c6ea1; rand-links: 1.2vw inzet #4c6ea1;
Structureren van het materiaal
De aard van de gegevens die in een matrix worden gepresenteerd, vereist vaak wijziging van de randen, celframes, rijen of kolommen van de tabel. Hiervoor kunt u gebruik maken van:
- lijnen op nul zetten (voor randbreedte specificeert u een waarde van 0px);
- verborgen.
Het voordeel van verborgen is de prioriteit ervan. Als de regel van twee elementen tegelijk van toepassing is op de rand en voor één ervan is de waarde verborgen in de randstijl, wordt de lijn niet weergegeven. Dat wil zeggen dat u eenvoudig de hele tafel kunt maken en vervolgens selectief onnodige frames kunt verwijderen.
Het gebruik van verborgen op cellen maakt het onmogelijk om de rand te herstellen met andere methoden (behalve zwaargewicht! belangrijk). Als u daarom enkele zijkanten van de cellen moet verwijderen, is het beter om er geen te gebruiken.
Laten we zeggen dat er een tafel is. Het doel is om de verticale randen binnen de eerste regel te verwijderen. Het is gemarkeerd met een aparte tag (kop), dus het is niet nodig om een extra klasse in te voeren. Als u verborgen op de gehele tag toepast, waarbij u border-left opgeeft, wordt samen met de interne randen een deel van het zijframe van de tabel verwijderd, wat niet vereist was door de voorwaarde. Als u geen en een matrixlijn gebruikt, zijn er voor de interne lijnen twee niet-conflicterende regels, en voor de buitenrand zal geen enkele in strijd zijn met de regel die eraan in de tabel is gegeven, en blijft de zijkant op zijn plaats .
Het verwijderen van individuele cellijnen gebeurt met behulp van klassen die aan de overeenkomstige elementen worden toegewezen, zoals werd getoond bij de individuele instelling van stijl, breedte en kleur.
Terwijl het gemakkelijker is om de zijrand in een HTML-tabel te verwijderen door te verwijzen naar de buitenste frames van de matrix, die in de tabel worden aangegeven. Het volstaat om een specifieke regel in CSS aan te geven.
Tabel (rand-links-stijl: verborgen; )
Het verwijderen van randen in rijen is eenvoudig te implementeren met behulp van de border-eigenschap met de waarde verborgen in tr. Niet alleen de horizontale lijnen van de tafel verdwijnen, maar ook de zijkanten. De matrix degenereert in verticale kolommen.
Tr (randstijl: verborgen; )
Als laatste redmiddel, ga naar!belangrijk. Als u deze na de instructie toevoegt, krijgt deze extra prioriteit.
HTML-tabelranden zijn flexibel en gemakkelijk aan te passen. Met de eigenschappengroep Rand kunt u elementen verbergen en de kleur, breedte of stijl wijzigen. Het nadeel van tabellen is dat het resultaat van een combinatie van regels toegepast op een afzonderlijk element niet altijd duidelijk voorspelbaar is. Met het oog hierop wordt aanbevolen om het aantal mogelijke stijlen voor randen te beperken of selectief toe te passen.
Deze lezing bespreekt in detail de principes van het gebruik van tabellen in HTML-opmaak. Dit omvat een tabelvormige organisatie van tekst, een tabelvormig coördinatenraster en afbeeldingen georganiseerd in tabellen.
Hulpmiddelen voor het beschrijven van tabellen in HTML
Naarmate het WWW zich ontwikkelde, werd het duidelijk dat de bronnen in HTML niet voldoende waren om een hoogwaardige weergave van verschillende soorten documenten te bieden. Het nadeel van HTML was het ontbreken van hulpmiddelen voor het weergeven van tabellen. Voor dit doel wordt vooraf opgemaakte tekst (tag
), waarin de tabel is omlijnd in ASCII-tekens. Maar deze vorm van presentatie van tabellen was niet van voldoende kwaliteit en onderscheidde zich van de algemene stijl van het document. Na de introductie van tabellen in HTML beschikten Webmasters niet alleen over een tool voor het plaatsen van tekst en numerieke gegevens, maar over een krachtig ontwerptool om grafische afbeeldingen en tekst op de juiste plek op het scherm te plaatsen.
Tabellen maken in HTML
De tag wordt gebruikt om tabellen te beschrijven<ТАВLЕ>. Label<ТАВLЕ>vertaalt, net als vele anderen, automatisch de regel voor en na de tabel.
Een tabelrij maken - tag<ТR>
Label<ТR>(Tabelrij) maakt een tabelrij. Alle tekst, andere tags en attributen die op één regel moeten worden geplaatst, moeten tussen lt;TR>-tags worden geplaatst.
Tabelcellen definiëren - tag<ТD>
Cellen met gegevens worden meestal in een tabelrij geplaatst. Elke cel die tekst of afbeelding bevat, moet omgeven zijn door tags<ТD>. Aantal labels<ТD>in een rij definieert het aantal cellen
Tafel
| Als een tabel twee TR-tags heeft, heeft deze twee rijen. |
| Als er drie TD-tags op een rij staan, |
dan daarin |
drie kolommen. |
Tabelkolomkoppen - tag<ТН>
Koppen voor tabelkolommen en -rijen worden ingesteld met behulp van de headertag<ТН>(TableHeader, tabeltitel). Deze tags zijn vergelijkbaar<ТD>. Het verschil is dat de tekst tussen de tags staat<ТН>, wordt automatisch vetgedrukt geschreven en standaard in het midden van de cel geplaatst. U kunt de tekst uit het midden halen en de tekst links of rechts uitlijnen. Als je gebruikt<ТD>met label<В>en attribuut<АLIGN=center>, ziet de tekst er ook uit als een titel. Houd er echter rekening mee dat niet alle browsers vetgedrukte lettertypen in tabellen ondersteunen, dus het is beter om tabelkoppen in te stellen met behulp van<ТН>.
| De koptekst is standaard gecentreerd |
De koptekst kan kolommen samenvoegen |
| De koptekst kan vóór de kolommen worden geplaatst |
Tekst of gegevens |
Tekst of gegevens |
| Koptekst kan regels samenvoegen |
Tekst of gegevens |
Tekst of gegevens |
| Tekst of gegevens |
Tekst of gegevens |
| Tekst of gegevens |
Tekst of gegevens |
Tabelkoppen gebruiken - tag<САРТIОN>
Label
Hiermee kunt u tabelkopteksten maken. Standaard worden koppen gecentreerd en boven (<САРТION АLIGN=top>), of onder de tafel (<САРТION ALIGN=bottom>). De titel kan uit willekeurige tekst en afbeeldingen bestaan. De tekst wordt verdeeld in regels die overeenkomen met de breedte van de tabel. Soms labelen<САРТION>gebruikt om een foto te signeren. Om dit te doen, volstaat het om een tabel zonder randen te beschrijven.
Kop boven tabel
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
Onder de tafel
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
NOWRAP-kenmerk
Normaal gesproken wordt tekst die niet in één rij van een tabelcel past, naar de volgende rij verplaatst. Wanneer u echter het NOWRAP-attribuut met tags gebruikt<ТН>of<ТD>De lengte van de cel wordt vergroot zodat de tekst die erin staat op één regel past.
COLSPAN-kenmerk
Labels<ТD>En<ТН>gewijzigd met behulp van het COLSPAN-attribuut (Kolombereik, kolomverbinding). Als u een cel breder wilt maken dan de boven- of onderkant, kunt u het COLSPAN-attribuut gebruiken om deze over een willekeurig aantal gewone cellen uit te rekken.
| Als u een cel breder wilt maken dan de boven- of onderkant, |
u kunt het COLSPAN=2 attribuut gebruiken, |
| om het over een willekeurig aantal gewone cellen uit te strekken. |
ROWSPAN-kenmerk
ROWSPAN-attribuut gebruikt in tags<ТD>En<ТН>, is vergelijkbaar met het COLSPAN= attribuut, alleen specificeert het het aantal regels waarover de cel wordt uitgerekt. Als u een getal groter dan één hebt opgegeven in het kenmerk ROWSPAN=s, moet het overeenkomstige aantal rijen zich onder de uitgerekte cel bevinden. Het kan niet onder aan de tafel worden geplaatst.
WIDTH-kenmerk
Het WIDTH-attribuut wordt in twee gevallen gebruikt. Je kunt het in een tag plaatsen<ТАВLЕ>om de breedte van de hele tafel weer te geven, of kan worden gebruikt in tags<ТD>of<ТН>om de breedte van een cel of groep cellen in te stellen. De breedte kan worden opgegeven in pixels of als percentage. Als u bijvoorbeeld de tag instelt<ТАВLЕ>WIDTH=250, u krijgt een tabel die 250 pixels breed is, ongeacht de paginagrootte op uw monitor. Bij het instellen van WIDТН=50% in de tag<ТАВLЕ>de tabel beslaat de helft van de breedte van de pagina bij elk afbeeldingsformaat op het scherm. Houd er dus rekening mee dat als de gebruiker een smalle viewport heeft, uw pagina er een beetje vreemd uit kan zien als u de tabelbreedte als percentage opgeeft. Als u pixels gebruikt en de tabel breder is dan het weergavegebied, verschijnt er onderaan een schuifbalk waarmee u naar links en rechts over de pagina kunt bewegen. Afhankelijk van de uit te voeren taken kunnen beide methoden voor het instellen van de breedte van de tabel nuttig zijn.
| Tekst of gegevens - breedte 100% |
of
| Tekst of gegevens - breedte 50% |
of
| Tekst of gegevens - 200 pixels breed |
of
| Tekst of gegevens - 100 pixels breed |
Lege cellen toepassen
Als een cel geen gegevens bevat, heeft deze geen randen. Als je wilt dat een cel randen heeft maar geen inhoud, moet je er iets in plaatsen dat niet zichtbaar is als je het bekijkt. U kunt een lege tekenreeks gebruiken<ВR>. U kunt zelfs lege kolommen opgeven door de breedte ervan in pixels of relatieve eenheden te definiëren en geen gegevens in de resulterende cellen in te voeren. Dit hulpmiddel kan handig zijn bij het plaatsen van tekst en afbeeldingen op een pagina.
CELLADDING-kenmerk
Dit attribuut bepaalt de breedte van de lege ruimte tussen de inhoud van de cel en de randen ervan, dat wil zeggen dat het de marges binnen de cel bepaalt.
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
ALIGN- en VALIGN-attributen
Labels<ТR>, <ТD>En<ТН>kan worden gewijzigd met behulp van de attributen ALIGN en VALIGN. Het ALIGN-attribuut bepaalt of tekst en afbeeldingen horizontaal worden uitgelijnd, dat wil zeggen links of rechts, of gecentreerd. Horizontale uitlijning kan op verschillende manieren worden ingesteld:
UITLIJNEN=bleedleft drukt de inhoud van de cel dicht bij de linkerrand.
UITLIJNEN=links Lijnt de inhoud van een cel links uit, rekening houdend met de inspringing die is opgegeven door het CELLPADDING-attribuut.
UITLIJNEN=gecentreerd Centreert de inhoud van de cel.
UITLIJNEN=rechts Lijnt de inhoud van een cel rechts uit, rekening houdend met de inspringing die is opgegeven door het CELLPADDING-attribuut.
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
Het VALIGN-attribuut lijnt tekst en afbeeldingen verticaal uit binnen een cel. Verticale uitlijning kan op verschillende manieren worden ingesteld:
VALIGN=boven Lijnt de inhoud van een cel uit met de bovenrand.
VALIGN=midden Centreert de inhoud van de cel verticaal.
VALIGN=onder Lijnt de inhoud van een cel uit met de onderrand.
| Het VALIGN-attribuut lijnt tekst en afbeeldingen verticaal uit binnen een cel. |
bovenkant, |
midden, |
onderkant. |
| VALIGN=top Lijnt de inhoud van een cel uit met de bovenrand. |
bovenkant, |
bovenkant, |
bovenkant. |
| VALIGN=midden Centreert de inhoud van een cel verticaal. |
midden, |
midden, |
midden. |
| VALIGN=bottom Lijnt de inhoud van een cel uit met de onderrand. |
onderkant, |
onderkant, |
onderkant. |
BORDER-kenmerk
In het etiket<ТАВLЕ>bepalen vaak hoe de randen, dat wil zeggen de lijnen rond de tabelcellen en de tabel zelf, eruit zullen zien. Als u geen frame opgeeft, krijgt u een tabel zonder lijnen, maar wordt er ruimte voor toegewezen. Hetzelfde resultaat kan worden bereikt door in te stellen<ТАВLЕ ВОRDER=0>. Soms wil je de rand dikker maken, zodat deze beter opvalt. Om de aandacht op een afbeelding of tekst te vestigen, kunt u uitsluitend vetgedrukte randen instellen. Wanneer u geneste tabellen maakt, moet u randen met verschillende diktes maken voor verschillende tabellen, zodat ze gemakkelijker van elkaar te onderscheiden zijn.
CELLSPACING-kenmerk
Het CELLSPACING attribuut specificeert de breedte van de ruimtes tussen cellen in pixels. Als dit kenmerk niet is opgegeven, is de standaardwaarde twee pixels. Met het CELLSPACING= attribuut kunt u tekst en afbeeldingen plaatsen waar u ze nodig heeft. Als u een lege ruimte wilt achterlaten, kunt u een spatie in de cel schrijven.
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
| Tekst of gegevens |
|
Tekst of gegevens |
BGCOLOR-kenmerk
Met dit attribuut kunt u de achtergrondkleur instellen. Afhankelijk van de tag (TABLE, TR, TD) waarmee het wordt gebruikt, kan de achtergrondkleur worden ingesteld voor de hele tabel, voor een rij of voor een individuele cel. De waarde van dit attribuut is de RGB-code of standaardkleurnaam.
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
| Tekst of gegevens |
Tekst of gegevens |
Tekst of gegevens |
ACHTERGROND attribuut
Dit attribuut specificeert de achtergrondafbeelding voor tabellen. Geldt voor TABLE- en TD-tags. De waarde ervan is de URL van het achtergrondafbeeldingsbestand. Het gebruik van dit attribuut wordt hieronder besproken.
Tabellen gebruiken bij paginaontwerp
Het mooie van tafels is dat je de randen ervan onzichtbaar kunt maken als je dat wilt. Dit maakt het gebruik van de tag mogelijk<ТАВLЕ>Plaats tekst en afbeeldingen prachtig op de pagina. Dag label<ТАВLЕ>blijft het enige krachtige opmaakhulpmiddel in HTML. Ontwerpers van webpagina's hebben nu bijna dezelfde vrijheid met betrekking tot het gebruik van witruimte als ontwerpers van gedrukte pagina's. Tabellen zijn de beste manier om af te stappen van de hiërarchische plaatsing van tekst op webpagina's.
Als de browser tabellen ondersteunt, zal deze doorgaans de meest interessante effecten die ermee worden verkregen correct weergeven
Pedagogische Staatsuniversiteit van de Oeral
Welkom!
| Training "Basisprincipes van WEB-mastering" |
|
Kleurrijke tafels maken
In sommige browsers kunt u kleuren weergeven. Er zijn verschillende manieren om een tabel te kleuren, meestal afhankelijk van de browser die u gebruikt.
Gekleurde randen in Netscape Navigator. Je kunt de tafel niet alleen omringen met een mooie rand, maar je kunt hem ook een andere kleur geven dan de tekst- en achtergrondkleuren. Maak een eenvoudige grijze GIF (of een andere GIF die je als achtergrond wilt hebben) en definieer deze in een tag<ВODY>als pagina-achtergrond. Stel vervolgens de achtergrondkleur van de pagina in. Het resultaat is uw tag<ВОDY>zal er ongeveer zo uitzien:
Je hebt een dubbele achtergrond gemaakt: GIF en een opgegeven kleur. Als gevolg hiervan zal de achtergrondkleur zichtbaar zijn op alle tabelranden en horizontale lijnen (<НR>). Of uw achtergrond-GIF nu grijs is of niet, de gekleurde lijnen en tabelranden zullen merkbaar opvallen. Als de achtergrond-GIF niet te complex is, zal de laadtijd van de pagina slechts licht toenemen.
We hebben al ontdekt dat HTML-tabellen dat wel hebben kader, hoewel browsers deze standaard niet weergeven. Maar dat is nog niet alles, elke tabelcel heeft ook een frame genaamd cel grens. Maar dat is nog niet alles, het gebruik van speciale tag-attributen
U kunt de afstanden tussen cellen en van cellen tot het tabelframe wijzigen, evenals de interne opvulling van de randen van cellen tot hun inhoud.
HTML-tabelframe, celranden, afstanden daartussen en opvulling.
Dus voor het creëren van een kader HTML-tabellen en grenzen van zijn cellen Er wordt slechts één tag-attribuut gebruikt
- grens. De attribuutwaarde is een niet-negatief geheel getal (standaard nul) dat de grootte in pixels weergeeft. Maar let op: de grootte verandert alleen aan het tafelframe; aan de celranden blijft deze altijd ongewijzigd.
Om te veranderen afstanden tussen cellen(hun grenzen) en van cellen tot frame tabellen in tag
Het cellspatie-attribuut wordt toegepast. De waarden kunnen ook alleen getallen zijn die afstanden in pixels meten.
Intern te installeren opvulling van celranden tot hun inhoud vereist in tag
gebruik het cellpadding attribuut. En de waarden ervan zijn getallen die de pixelafmetingen aangeven.
Houd er rekening mee dat browsers standaard kleine waarden (twee pixels) instellen voor cellspatie en cellpadding. Als u de spatiëring helemaal wilt verwijderen, stelt u de attributen in op nul (0).
Voorbeeld van HTML-tabelranden, frames en opvulling
Tafelranden, frames en opvulling
| Cel 1.1 | Cel 1.2 | Cel 1.3 |
| Cel 2.1 | Cel 2.2 | Cel 2.3 |
| Cel 3.1 | Cel 3.2 | Cel 3.3 |
Tabel met alleen celranden en randen ingesteld:
| Cel 1.1 | Cel 1.2 | Cel 1.3 |
| Cel 2.1 | Cel 2.2 | Cel 2.3 |
| Cel 3.1 | Cel 3.2 | Cel 3.3 |
Resultaat in browser
Tabel met gewijzigde streepjes en afstanden:
Uiteraard is het niet nodig om een kader en celranden op de tafel te tekenen om de interne inspringingen en afstanden tussen cellen te wijzigen.
Volgens de HTML-syntaxis voegen browsers de waarden voor celspatie en celopvulling toe aan de afmetingen van de tabel en de cellen ervan. Als u de celbreedte bijvoorbeeld instelt op 100 pixels en cellpadding = "10" - voegen browsers 20 pixels toe aan de breedte (elk 10 aan de linker- en rechterkant) en wordt het 120 pixels. Over het algemeen zul je er gaandeweg wel achter komen.
Uitwijking van het onderwerp of hoe u inkepingen langs de randen van de pagina kunt verwijderen
In eerste instantie plaatsen alle browsers kleine marges langs de randen van de HTML-pagina, die vaak niet nodig zijn, dus nu leert u hoe u deze kunt verwijderen. Over het algemeen zou deze informatie aan het begin van het leerboek moeten worden geplaatst, maar daar zou het nauwelijks nuttig voor je zijn.
Te zijner tijd bij de tag
Er waren vier attributen die de grootte van deze marges voor elke zijde van de pagina bepaalden: bovenmarge (boven), rechtermarge (rechts), ondermarge (onder) en linkermarge (links). Nu zijn deze attributen verouderd, dus we zullen stijlen (CSS) gebruiken. Je kunt de margeafstanden langs de randen van de pagina dus op verschillende manieren wijzigen. Ik zal je er twee laten zien, en je zult over de derde leren als je besluit CSS te leren.
Methode één. In het etiket
geef het stijlkenmerk op met de volgende waarden:
style="marge:0" >...
- verwijdert inspringingen van alle zijden van de HTML-pagina in één keer.
stijl= "marge: rechtsboven linksonder">...
- past de grootte van de inkepingen voor elke zijde met de klok mee aan. In de regel worden formaten in pixels gebruikt, bijvoorbeeld: style= "marge:5px 3px 4px 5px" >...
De tweede en handigste manier. In het etiket
Huiswerk.
In deze les zal ik ook niet alles in detail beschrijven - alleen algemene punten. Om het plaatje compleet te maken, bekijk het voorbeeldresultaat.
- Maak drie tabellen, elk bestaande uit één rij en drie kolommen (kolommen).
- Plaats in de eerste tabel de koptekst of 'koptekst' van de pagina (niet te verwarren met de 'koptekst' van het HTML-document), in de tweede - de linker- en rechtermenu's, evenals de hoofdinhoud (inhoud) , in de derde - de voettekst of “voettekst” van de pagina.
- Laat de breedte van de eerste en laatste kolom van elke tabel vast zijn.
- Belangrijk. Gebruik label
![]()
alleen om vier horizontale menuknoppen in de paginakop te maken. In andere gevallen laat u de afbeeldingen op de achtergrond staan en worden in de tweede cellen van de tabellen alleen kleuren gebruikt, en in de eerste en laatste tabel is dit #99FF99.
- Zorg ervoor dat de pagina-inhoudstekst aan beide zijden van de tabelcel wordt uitgelijnd en dat de titel gecentreerd is.
- Wat de afstanden tussen tabelcellen en celinspringingen betreft, bedenk zelf waar ze volledig moeten worden verwijderd en waar ze moeten worden vergroot.
Daarom hebben we de eenvoudigste acties bestudeerd die met tabelgrenzen kunnen worden uitgevoerd. En nu ziet de tafel er veel esthetisch aantrekkelijker uit. De vulling van de cellen rust echter direct op de grenzen. Dit kan eenvoudig worden opgelost door de cellen in de HTML-tabel te laten inspringen. En dan zal de tekst in het frame, in de cel, beter leesbaar zijn.
Gebruik het attribuut om een cel te laten inspringen celvulling voor label
. Er is echter nog een andere optie die meer de voorkeur verdient: CSS.
In dit geval wordt de inspringing ingesteld met behulp van de eigenschap opvulling. Met zijn hulp zal het niet moeilijk zijn om te inspringen waar nodig, dat wil zeggen bovenaan, rechts, onderaan of links, met behulp van respectievelijk een van deze eigenschappen: opvulling-top, opvulling-rechts, opvulling-bodem En opvulling-links.
U kunt precies opgeven hoeveel pixels de inspringing moet zijn. Laten we een voorbeeld geven waarin de onderste inspringing zal zijn 20
pixels, en de rest zal dat zijn 10
. Zo een CSS-de code ziet er als volgt uit:
Td (opvulling: 10px; opvulling-onder: 20px; )
En de volledige stijlcode in dit stadium:
Tabel (rand: effen 1px blauw; rand samenvouwen: samenvouwen; ) td (rand: effen 1px blauw; opvulling: 10px; opvulling onder: 20px; )
Resultaat in browser:
Ruimtes tussen cellen
In de regel kunnen problemen die verband houden met het maken van tabellen worden opgelost door tags, attributen en eigenschappen te gebruiken waarmee u kaders en inspringingen in cellen kunt maken en ook de achtergrondkleur van de cellen zelf kunt instellen.
Inspringingen in tabellen komen niet alleen in cellen voor. Ze kunnen ook tussen de cellen zelf aanwezig zijn.
Er zijn twee opties voor het maken van inspringingen tussen cellen:
- attribuut gebruiken celafstand voor label
.
- gebruiken CSS-eigenschappen grensafstand.
Dat moet benadrukt worden grensafstand is opgegeven voor de tabel als geheel, terwijl de eigenschap opvulling wordt rechtstreeks voor cellen geschreven.
Laten we eens kijken naar een voorbeeld:
Tabel (rand: effen 1px blauw; rand samengevouwen: gescheiden; randafstand: 5px; ) td (rand: effen 1px blauw; opvulling: 10px; opvulling-onder: 20px; )
En het resulterende resultaat:
Laten we meteen bepalen dat u niet moet proberen dergelijke inkepingen te maken grens-instorting: ineenstorting. Bij gebruik van deze optie ‘plakken’ de cellen immers aan elkaar.
En om ze van elkaar gescheiden te houden, moet u gebruiken grens-instorting: gescheiden. Het is belangrijk om te begrijpen dat deze waarde de standaardwaarde is. En het wordt alleen gebruikt om duidelijk te laten zien hoe dit probleem wordt opgelost. Als we deze regel verwijderen, wordt het resultaat opgeslagen in de vorm van cellen die zich afzonderlijk van elkaar bevinden.
