Hoe maak je een tabelframe onzichtbaar in HTML.

Tafelframe belangrijk onderdeel. Het is universeel en wordt vaak gebruikt. Deze les laat zien hoe u een tabelkader, cel en rij kunt maken met behulp van een attribuut, maar het grootste deel van de les zal gericht zijn op CSS-eigenschappen omdat het frame generiek wordt bij gebruik van CSS-stijlen.

Een frame maken met behulp van een attribuut

Over het algemeen geen uitbreidbaar attribuut, ik zou zeggen zinloos. Het border attribuut bepaalt de dikte van de rand en dat is alles. Hieronder ziet u een voorbeeld:

Een eenvoudige manier om een ​​rand rond een element te maken

Ik zal meteen zeggen dat ik geen gedetailleerde aantekeningen zal geven, aangezien er in de toekomst een enorme les zal zijn over het grenseigendom, en misschien meer dan één. De universele eigenschapsrand kan de dikte, stijl en kleur van randen (frames) in één keer instellen. De dikte kan willekeurig zijn, de randkleur wordt ingesteld in hexadecimaal formaat, RGB-formaat En trefwoorden(rood, zwart, enz.). Welke stijlen zijn er, de onderstaande afbeelding (foto genomen van de site htmlbook.ru) en het volgende voorbeeld:

td(
rand: 5px effen #CCCCCC;
}

Frame links, rechts, onder en boven

Bij gebruik grenskader van alle kanten gemaakt. Maar we kunnen bepalen aan welke kant we het frame moeten tekenen. Rand links rand-links: 2px effen zwart; rand-rechts rand-rechts: 1px gestippeld #FF0000 ; rand-onder: 10px effen #000000 ; rand bovenaan: 1px effen groen. Zoals je kunt zien, hoeven ze dat niet te hebben dezelfde waarden, en je kunt ze ook combineren, dat wil zeggen, er meerdere schrijven, bijvoorbeeld een linker- en rechterrand (frame), enz. Alle. Ik ga niet verder, dit is een onderwerp voor een andere les. Voorbeeld:

tafel (
rand-links: 5px effen #CCCCCC;
rand rechts: 5px effen #CCCCCC;
}
td(
rand bovenaan: 5px effen #CCCCCC;
rand-onder: 5px effen #CCCCCC;
}

Afgeronde hoeken

Laten we nu een beetje ingaan op het onderwerp ‘schoonheid’ en bruikbaarheid. Om de randen van randen afgerond te maken, is er een border-radius-eigenschap. Dit is ook een aparte les, we zullen niet te veel in detail treden. Het accepteert een ander aantal argumenten. We zullen (alleen in deze les) één argument schrijven, en als we één waarde schrijven, zal er aan alle zijden (hoeken) dezelfde afronding zijn. De waarde kan in verschillende "maten" zijn, zoals pixels en percentages. Hieronder ziet u een voorbeeld:

td(
rand: 5px effen #CCCCCC;
grensradius: 10px;
}

Marges of opvulling

Om te voorkomen dat de tekst vlak tegen het kader komt, moet u deze laten inspringen. Dit zal ons helpen opvullingseigenschap. Het is ook multifunctioneel, maar we zullen het gedeeltelijk beschouwen, allemaal om dezelfde reden. We zullen slechts één waarde gebruiken. De waarde kan in verschillende "maten" zijn, zoals pixels en percentages. Hieronder ziet u een voorbeeld:

td(
rand: 5px effen #CCCCCC;
grensradius: 10px;
opvulling: 10px;

Met een kader rond een tafel kunt u deze markeren, scheiden van de rest van de webpagina en uw tafelontwerptools uitbreiden.

Om een ​​rand te maken, gebruikt u de eigenschap border style, die wordt toegevoegd aan de TABLE-selector. De tabel ziet er ook indrukwekkend uit als de framekleur overeenkomt met de achtergrondkleur van de header (tag ), zoals weergegeven in afb. 1.

Voorbeeld 1 laat zien hoe u zo'n eenvoudige tabel kunt maken.

Voorbeeld 1: Maak een frame rond een tafel

IN in dit voorbeeld De tekst in alle cellen is links uitgelijnd, wat niet altijd handig is. In afb. Figuur 2 toont een tabel waarin de inhoud van de cellen gecentreerd is, behalve de linkerkolom, waar de tekst links is uitgelijnd.

Het wijzigen van de uitlijning gebeurt met behulp van de eigenschap text-align style, terwijl for individuele cellen verplicht om binnen te komen nieuwe klasse om sommige kenmerken flexibel te beheersen (voorbeeld 2).

Voorbeeld 2: Tabel met uitlijning van celinhoud

In dit voorbeeld wordt een stijlklasse met de naam lc toegevoegd aan de cellen in de linkerkolom om de uitlijning van de inhoud te wijzigen en de tekst vetgedrukt te maken.

Een tabel met een koptekstachtergrond in de vorm van een verloop ziet er indrukwekkend uit (Fig. 3). Het maken van zo'n tabel is echter niet bijzonder moeilijk.

In dit geval wordt een vooraf gemaakte tekening als achtergrond gebruikt, zoals weergegeven in Fig. 4.

Er zijn verschillende manieren om een ​​achtergrond toe te voegen aan slechts één rij van een tabel. Je kunt het label gebruiken

, die is ontworpen om een ​​of meer rijen op te slaan die bovenaan de tabel worden weergegeven. Voor deze tag voegen we een stijleigenschap achtergrond toe, deze definieert tegelijkertijd de achtergrondkleur en achtergrondafbeelding, evenals de herhaalbaarheid ervan (voorbeeld 3). Voorbeeld 3: Gebruik

achtergrondafbeelding In dit voorbeeld de tag alleen dekkingen bovenste regel

Een raster is een reeks horizontale en verticale lijnen tussen tabelcellen die de inhoud van de cellen van elkaar scheiden. Het raster is de standaardinstelling als u de randweergave inschakelt met het kenmerk bordertag

Om de tabel te maken die wordt weergegeven in Fig. 1 Het enige wat u nodig heeft is niets: stel de eigenschap border style in voor elke cel en gebruik de eigenschap border-collapse.

Bij het toevoegen grens eigenschappen voor de TD- of TH-selector verschijnen dubbele lijnen tussen de cellen, die worden gevormd door het contact van de frames rond de cellen. Om dit te voorkomen, stelt u de eigenschap border-collapse van de TABLE-selector in op collapse , zoals weergegeven in voorbeeld 1.

Voorbeeld 1: Een mesh maken

In dit voorbeeld wordt ook de achtergrondkleur voor de koptekstcellen ingesteld (tag ) via de achtergrondeigenschap.

Als alternatief kunt u het frame rond de tafel helemaal verwijderen, zodat alleen de lijnen erin overblijven (fig. 2).

In dit geval zou het het handigst zijn om het frame niet te verwijderen, maar om het te verbergen, waardoor het een kleur krijgt die overeenkomt met de achtergrondkleur van de webpagina. In voorbeeld 2 wordt de achtergrond van de pagina dus ingesteld op wit en wordt de rand van dezelfde kleur gebruikt, die wordt toegevoegd aan de TABLE-selector.

Voorbeeld 2: Tafel zonder buitenframe

In dit voorbeeld is de dikte van de lijnen tussen de cellen één pixel en de witte rand eromheen twee pixels, d.w.z. één pixel meer. Dit is nodig om de buitenrand rond de tafel veilig te verbergen.

Om de inhoud van de ene cel duidelijk van de andere te scheiden, worden randen aan de cellen toegevoegd. Verantwoordelijk voor hun creatie grensparameter label

Voorbeeld 1 laat zien hoe u een rand rond cellen maakt.

Voorbeeld 1: Een frame aan een tabel toevoegen

Frames die op deze manier zijn gemaakt, verschillen enigszins qua uiterlijk in verschillende browsers.

Rijst. 1. Grens verkregen met behulp van de randparameter

Om één type frame te krijgen, wordt aanbevolen om de randstijltag te gebruiken en deze toe te passen op tabelcellen (tag of ). Maar ook hier liggen ons valkuilen te wachten. Omdat voor elke cel een frame wordt gemaakt, wordt een rand met dubbele dikte verkregen waar de cellen elkaar raken. Er zijn verschillende manieren om deze functie op te lossen. Het eenvoudigste is om de eigenschap border-collapse toe te passen met de waarde collapse . Zijn taak is om het contact van lijnen te volgen en, in plaats van een dubbele rand, een enkele af te beelden. We voegen dit dastatkov-attribuut toe aan de tag

Voorbeeld 2: Rand samenvouwen gebruiken bij het maken van tabelranden

Het verschil tussen tabelranden met en zonder de border-collapse-parameter wordt getoond in Fig. 2.

A

B

Rijst. 2. Tabelweergave bij gebruik van het border-collapase attribuut

In afb. Figuur 2a toont het standaard tafelframe. Houd er rekening mee dat in de tabel alle lijnen een dubbele dikte hebben. Door de parameter voor het samenvouwen van de rand toe te voegen, wordt deze functie verwijderd en wordt de dikte van alle lijnen hetzelfde (figuur 2b).

Om lijnen van hetzelfde type binnen de tabel te ontwikkelen, kunt u een andere weg inslaan. Moet worden toegevoegd voor selector frame, maar annuleer de lijn rechts en onderaan, en stel de overeenkomstige attributen in op none .

, eindigen we met het gewenste frame (voorbeeld 3). Voor uniformiteit moet erop worden gelet dat de stijl, dikte en kleur van de rand in alle gevallen overeenkomen.

Voorbeeld 3. Een frame voor een tabel maken met behulp van het border-attribuut Deze methode kan variaties hebben, bijvoorbeeld voor de selector

Integendeel, we voegen het border-attribuut toe, maar verwijderen de lijn rechts en onder. In ieder geval zal het gepresenteerde resultaat hetzelfde zijn.

Een eenvoudige en originele uitstraling van de tafel kan worden bereikt als de kleur van de randen overeenkomt met de achtergrondkleur. Maar om de lijnen zichtbaar te maken, moet je zeker de achtergrond van de tag vullen of . Dan zien de tabelcellen eruit alsof ze door een snijder tussen elkaar zijn gesneden (voorbeeld 4). Voorbeeld 4: Gebruik 0 X X 0 0 X X X 0 in de tafel Grenzen creëren standaard is ingesteld, is het soms wenselijk om dit zo in te stellen dat de gebruiker zijn achtergrondkleur niet opgeeft via de browserinstellingen. Dezelfde kleur zou moeten zijn tafel lijnen, in dit geval worden ze niet expliciet uitgegeven en verdelen ze de cellen alleen onderling. Het resultaat van Voorbeeld 4 wordt hieronder getoond. Rijst. 3. Het uiterlijk van randen die overeenkomen met de achtergrondkleur Frames (blokparameters) De waarden van deze eigenschappen worden gebruikt om de kenmerken van het gebied rond het element in te stellen. Dit kan worden toegepast op symbolen, afbeeldingen, enz. Opties Betekenis Beschrijving rand-top-kleur rand-rechts-kleur grens-links-kleur rand-onder-kleur randkleur kleur (geen kleur standaard) Bepaal de kleur van de vier zijden van de frames. Als u de kleur vervangt door de URL van de afbeelding, wordt deze herhaald om een ​​kader te vormen. rand-top-stijl border-right-stijl border-links-stijl rand-onder-stijl rand-stijl geen (standaard) stevig dubbele groef nok inzet begin Bepaalt de stijl van de vier zijden van de frames. grens-top grens-rechts grens-links grens-bodem grens frame_breedte, frame_stijl, kleur (standaard: medium, geen, geen kleur) Bepaal de eigenschappen van de vier zijden van de frames. Werkt hetzelfde als de opvuleigenschappen (zie hieronder), behalve dat de rand zichtbaar is. framebreedte kan medium, dun of dik zijn, of gespecificeerd in eenheden. frame_stijl kan geen of solide zijn Argument kleur gebruikt om de vulkleur voor de achtergrond van een element te definiëren terwijl het wordt geladen, evenals achter de transparante delen van het element. Als u in plaats daarvan het afbeeldingsadres doorgeeft, wordt het patroon herhaald en wordt de omtrek van het frame opgevuld. rand-top-breedte rand-rechts-breedte rand-links-breedte rand-onder-breedte grensbreedte dun gemiddeld (standaard) dik lengte Definieer de breedte van de rand rond het element. Elke zijde kan worden gespecificeerd met een overeenkomstige parameter. U kunt het instellen van vier afzonderlijke eigenschappen vervangen door het instellen van één eigenschap grensbreedte hetzelfde als voor inspringingseigenschappen marge. ciip rect (/boven/rechts/onder/links/) automatisch (standaard) Bepaalt hoeveel van het element zichtbaar is. Alles buiten het door deze parameter gespecificeerde gebied kan niet worden gezien. weergave "", geen "" (standaard) Deze instelling geeft aan of het element wordt weergegeven. vlot geen (standaard) links rechts Specificeert dat een element zich links of rechts om andere elementen heen wikkelt in plaats van deze eronder te plaatsen. Ondersteund door tags , ... hoogte automatisch (standaard) lengte Stel de hoogte van het element in en meet deze indien nodig. De waarde wordt geretourneerd als een tekenreeks, inclusief de eenheden (px, %, etc.). Gebruik de eigenschap posHeight om een ​​numerieke waarde te verkrijgen. links automatisch (standaard) lengte interesse Ze bepalen de horizontale coördinaat van het element, zodat u elementen correct kunt installeren en verplaatsen. De waarde wordt geretourneerd als een tekenreeks, inclusief de eenheden (px, %, etc.). Gebruik de eigenschap posLeft om de waarde als een getal te verkrijgen. Voorbeeld 1: Deze lijn is onderstreept met een stippellijn. Voorbeeld 2: Verschillende soorten frames. 1. geen - Geen rand (rand: geen;) 2. stevig - Er is een rand (rand: 1px effen;) Voorbeeld 4: Frame met ronde hoeken. . bij belastingaangiften; . certificaten 2-NDFL; Alle vermelde documenten vermelden de 11-cijferige OKTMO-code in plaats van de eerder gebruikte OKATO-codes. #org { breedte: 80%; marge-top:2em; marge-links: auto; marge-rechts: auto; randradius: 10px 10px; -moz-border-radius: 10px 10px; -webkit-border-radius: 10px 10px; opvulling: 15px 20px 15px 80px; marge: 0px 0px 0px 0px; -webkit-box-schaduw: 2px 2px 3px #999; -moz-box-schaduw: 2px 2px 3px #999; /*IE hack op minimale hoogte*/ min-hoogte: 40px; hoogte:auto !belangrijk; hoogte:40px; overloop:zichtbaar; Positie: relatief; onderkant: 6px; rechts: 6px; rand: 1px effen #7e5a25; /*Stel de positie in van de achtergrond afbeelding*/ achtergrondpositie: 20px 50%; achtergrondherhaling: geen herhaling; tekst uitlijnen: uitvullen; lettergrootte: 0,9em; Achtergrondkleur: #e8e3d4; achtergrondafbeelding: url(baba.gif); } Vanaf 1 januari 2014 worden nieuwe OKTMO-codes aangegeven in: . bij belastingaangiften; . certificaten 2-NDFL; . betalingsopdrachten (veld 105); . ontvangstbewijs voor betaling van belastingen, heffingen, heffingen, formulier PD-4 belasting. Alle vermelde documenten vermelden de 11-cijferige OKTMO-code in plaats van de eerder gebruikte OKATO-codes. Voorbeeld 5: Er wordt een frame ontworpen met behulp van geneste tabellen. Suvorov A.V. Geneste tabellen afbeelding Tabel 1 Smalle zwarte rand (5px) Tabelparameters: tabel--> bgcolor=#000000 style="border:2px solid #a3852f" td--> style="padding: 5px" Voorbeeld 6: Verticaal frame. Breedte en hoogte blok elementen CSS-eigenschappen breedte En hoogte- stel de breedte en hoogte van blokelementen in. De breedte en hoogte van een element kunnen op de volgende manieren worden ingesteld: auto- De afmetingen van een element worden bepaald door de inhoud ervan. (standaard) % - De afmetingen van het element worden ingesteld als een percentage van de hoogte/breedte van het bovenliggende element. px- Elementafmetingen worden gespecificeerd in pixels of andere maateenheden die in CSS worden geaccepteerd. Voorbeeld: Blok 1 Blok 2 Blok 3 Elementinhoud beheren Wat te doen met de inhoud van een element als het de omvang ervan overschrijdt? Als een element exacte hoogte- en breedtewaarden krijgt ( hoogte, breedte) en de inhoud ervan, bijvoorbeeld lange tekst, past niet binnen de opgegeven limieten, dan wordt een dergelijk element standaard uitgerekt tot benodigde maten, wat niet altijd in het voordeel van de webmaster is. Attribuut komt te hulp overloop, die de browser vertelt wat hij in dergelijke gevallen met het element moet doen. Eigendom overloop kan de volgende betekenissen hebben: zichtbaar- Het element wordt uitgerekt tot de gewenste maat. (standaard) verborgen- De inhoud van het element wordt “afgesneden”; alleen dat deel dat in het element past, is zichtbaar. rol- Scrollbars worden toegevoegd (altijd! ook als de inhoud binnen het element past). auto- Indien nodig worden schuifbalken toegevoegd. Voorbeeld: CSS CSS(eng. Cascading Style Sheets - trapsgewijze tafels stijlen) - een formele taal voor het beschrijven van het uiterlijk van een document dat is geschreven met behulp van een opmaaktaal, enz. .............. Resultaat CSS CSS(Engels: Cascading Style Sheets) is een formele taal voor het beschrijven van het uiterlijk van een document dat is geschreven met behulp van een opmaaktaal. Methoden CSS-verbindingen naar het document CSS-regels zijn formeel geschreven CSS-taal en bevinden zich in stijlbladen, dat wil zeggen dat stijlbladen CSS-regels bevatten. Deze stijlbladen kunnen zich in het webdocument zelf bevinden, verschijning die ze beschrijven, en in afzonderlijke bestanden in CSS-formaat. (In wezen is het CSS-formaat het gebruikelijke tekstbestand. Het .css-bestand bevat niets anders dan een lijst CSS-regels en commentaar erop.) Dat wil zeggen dat deze stijlbladen op vier verschillende manieren met elkaar kunnen worden verbonden en ingebed in het webdocument dat ze beschrijven: Wanneer het stijlblad binnen is apart bestand, kan het met behulp van een tag aan een webdocument worden gekoppeld , in dit document tussen de tags En. (Tag heeft een href-attribuut dat de waarde heeft van het adres van dit stijlblad). Alle regels in deze tabel zijn van toepassing op het hele document; ..... Wanneer een stylesheet zich in een apart bestand bevindt, kan deze aan een webdocument worden gekoppeld met behulp van de @import-richtlijn, die zich in dit document tussen tags bevindt En) onmiddellijk na de tag Wanneer een stylesheet in het document zelf wordt beschreven, kan deze daarin tussen tags worden geplaatst(die zich op hun beurt in dit document tussen de tags bevinden En). Alle regels in deze tabel zijn van toepassing op het hele document; ..... Wanneer een stijlblad in het document zelf wordt beschreven, kan het zich daarin in de hoofdtekst van een afzonderlijke tag bevinden (via het stijlattribuut) van dit document. Alle regels in deze tabel zijn alleen van toepassing op de inhoud van deze tag. Koop een olifant Gerelateerde publicaties: Review van Samsung Galaxy Xcover (S5690): onder de bescherming van een smartphone De telefoonapplicatie is gestopt - wat te doen aan de crash in Samsung? Het BIOS openen op een HP laptop Het BIOS instellen op een HP Pavilion 15 laptop Hoe twee niet-aangrenzende harde schijfpartities samen te voegen  Categorieën