Tabellceller med olika css-indrag. Hur man ökar utrymmet mellan cellramar

Vilken som helst av dem kan användas för att ändra vissa egenskaper för en eller flera tabellrader: detta är återigen justeringen av innehållet i celler i rader horisontellt och vertikalt - med hjälp av attributen align respektive olig; och uppgift bakgrundsfärg celler med attributet bgcolor.

När du använder dessa taggar bör du vara medveten om flera nyanser som avgör skillnaderna mellan dem.

Taggar

Märka

HTML-tabellkanter kan enkelt ändras med betyder css. Deras skärm konfigureras med hjälp av följande egenskaper: kollaps och mellanrum.

För att redigera tabellvyn, använd egenskapsgruppen kantlinje. Det låter dig anpassa bredd, färg, närvaro/frånvaro av ramar, deras stil och andra visningsfunktioner.

Grunderna

En tabell utan stil visas som strukturerad text utan ramar. Tabell i html är byggd med taggar:

• tr för strängar;
• th för rubriker;
• td för kolumner.

Textstorleken och teckensnittet, bakgrunden, indragen från kanten av webbläsarfönstret ställs in i css i brödtextbehållaren.

Kropp (typsnittsfamilj: Helvetica, Sans-serif; teckenstorlek: 5vw; färg: svart; bakgrundsfärg: rgba(228, 228, 245); stoppning: 20vh; )

Stilar används för att utforma utseendet på matrisen. Border-egenskapen låter dig specificera tjockleken, typen och färgen på kanten i en HTML-tabell.

(kant-bredd: 2vw; kant-stil: prickad; kant-färg: himmelsblå;)

Förkortad som kant: breddstilsfärg.

(kant: 1px fast #4c6ea1;)

För en specifik sida ställs den in med mallen border-top(/right/bottom/left)-style(/color/width/radius).

(kant-topp-färg: mörkblå;)

Utfyllnad ställer in utfyllnaden inuti cellen från texten till ramen, textjustering ställer in justeringen.

Stilar används för att designa utseendet på ett bord. Med kantegenskapen kan du ange tjocklek, stil och färg på kanten. Utfyllnad ställer in indraget från texten, textjustering ställer in justeringen.

Th, td (kant: 1vw solid #4c6ea1; stoppning: 1vw; text-align: vänster; )

Inga ramar

Det är inte nödvändigt att använda kantlinje eller separat ange kantfärg, -bredd och -stil, eftersom du kan göra en HTML-tabell utan kanter med en fullständig design. Till exempel ställer följande kod in bakgrunden, stoppningen och de rundade hörnen (den senare matrisen utan inre eller yttre linjer).

Tabell (textjustera: vänster; bakgrundsfärg: rgba(228, 228, 245); border-top-left-radie: 15em 1em; border-bottom-right-radie: 15em 1em; ) td, th (utfyllnad: 1,5vw)

Genom att kunna ställa in en bakgrund för varje cell kan en tabell utan ramar se ut att ha en.

Tabell (textjustering: vänster; bakgrundsfärg: rgba(228, 228, 245); bredd: 70vw; kantavstånd: 2vh 2vh; ) td, th ( stoppning: 1,5vh; ) td ( bakgrundsfärg: rgba (247, 247, 255);

Du kan ta bort gränserna för HTML-tabellen och lämna de interna. För att göra detta, ställ till exempel in kantegenskapen för celler (tr), ställ in gemensamma ramar på intilliggande sidor (kollaps) och förbjud att rita linjer runt matrisen (dold). Sista åtgärden kommer att dölja raderna av celler som, när komprimering är aktiverad, hamnar på samma plats som bordets ytterkanter.

Tabell (textjustera: center; kant-kollaps: komprimera; bakgrundsfärg: rgba(228, 228, 245); kant-radie: 50%; bredd: 29vh; höjd: 10vh; kant-stil: dold; ) td (stoppning: 1,5vh; kant: 0,5vh solid svart;)

Slå ihop och separera

En av huvudtabellegenskaperna i html, border-collapse, bestämmer hur cellgränser kommer att visas. Egenskapen kan ha ett av tre värden: kollapsa, separera, ärva.

tabell ( gräns-kollaps: komprimera; )

Standardinställningen är inställd på separat, så varje cell kommer att ha sin egen ram. Tack vare kollaps kan du slå samman celllinjerna så att deras innehåll separeras av en enda ram. Bilden visar de tre gränstillstånden som beskrivs ovan: utan stilar; med border-collapse inställd på standard; med värdet border-collapse, vilket lämnar en gemensam linje mellan cellerna.

Dubbla ramar

Egenskapen collapse låter dig göra gränserna för celler i en HTML-tabell både oberoende av varandra och gemensamma. Border-space-egenskapen används ofta med den, som reglerar avståndet mellan cellramar. Du kan ange både horisontellt och vertikalt avstånd.

Tabell (kantavstånd: 0,5vw 1vw;)

Det första värdet indikerar avståndet mellan cellerna horisontellt, det andra - vertikalt. Om en ram specificeras för själva bordet, så bildas också avståndet från den till cellerna av spasing-egenskapen, men den kan också påverkas av matrisens utfyllnad. I de fall matrisen har en bakgrund kommer det fria utrymmet mellan cellerna att fyllas med det.

Tabell ( kantavstånd: 0,5vw 1vw; kant: 1vw fast #4c6ea1; utfyllnad: 1vw; bakgrundsfärg: svart; ) td, th ( kant: 1vw fast #4c6ea1; utfyllnad: 0,3vw; textjustering: vänster; bakgrundsfärg: vit)

Tomma celler

Om en tabell inte har sammanslagna cellkanter tillåter egenskapen empty-cells att cellinjerna och bakgrunden visas, som anses vara tomma (markerade som synliga eller har inga tecken). Om du vill visa kanterna och bakgrunden för varje cell, ställ in egenskapen att visa.

tabell (tomma celler: visa;)

Hide-värdet döljer gränserna och bakgrunderna för tomma block. Om alla celler i en rad är tomma, har raden noll höjd och bara en vertikal linje.

Tabell (kantavstånd: 0,5vw 1vw; kant: 0,1vw fast #4c6ea1; stoppning: 0,5vw; bakgrundsfärg: rgba(33, 31, 171, 0,12); tomma celler: dölj; ) td, th ( kantlinje : 0.3vw solid #4c6ea1; stoppning: 0.5vw;

Attribut

För att allokera gränser till grupper av element (celler, kolumner, rader, grupper av rader eller kolumner) finns reglerattributet. Dess värde skrivs direkt i html-koden i tabelltaggen.

Det låter dig selektivt rita ramarna för element. Det räcker med att ange attributet i html, detta kommer att skapa interna linjer mellan cellerna. HTML-tabellkanten måste anges manuellt i css.

Så den första bilden visar den rena driften av attributet utan ytterligare ramdesign via tabell. På den andra bilden ritas den övre linjen, som installerades med hjälp av instruktionerna.

Tabell (border-top: 1vw doted #486743;)

Ett attribut kan ha flera värden. Alla skapar gränser mellan celler med en kanttjocklek på 1px. Cols skapar linjer mellan kolumner, rader - mellan rader, ingen raderar kanterna. Bilden visar exempel på en tabell med värdena alla och rader.

Du kan ändra färgen på cellkanterna och ramens bredd när du använder reglerattributet med hjälp av kant och kantfärg.

Stilkonflikter

Celler, rader, kolumner och elementgrupper kan ges sina egna kantvärden. De kan dock skilja sig åt i tre parametrar: stil, tjocklek och färg.

I kollapsläge uppstår stylingkonflikter. På grund av det faktum att en kant kan vara föremål för regeln om två olika celler, uppstår problemet med att välja en stil som kommer att ha företräde. Som E. Malchuk skriver, vinner den mest "fångande" (förutom dolda).

1. Om ett av elementen har den omtvistade gränsens egenskap för kantstil inställd på dold, vinner den stilen. Hidden har högsta prioritet.
2. Den minsta vikten är ingen. Det föreskriver också att raden inte ska visas, men för att instruktionen ska exekveras måste alla element för den raden ha denna (ingen) regel.
3. Mellan tunna och tjocka bårder har tjocka större prioritet.
4. Med samma ramar, men olika stilar, vinner alltid dubbel solid, följt av solid, streckad, prickad.
5. Om de enda skillnaderna är färger, är utseendet på den minsta komponenten alltid högre (celldekoration har högre prioritet än rader och rader är högre än tabeller).

Konflikt illustration

Det är lätt att illustrera konflikten mellan stilar med hjälp av tabellen som redan diskuterats. Det räcker med att lägga till ett par klasser till cellerna och specificera designen för dem. Html tar formen:

Motsvarande css.

Bröd (typsnittsfamilj: Helvetica, Sans-serif; teckenstorlek: 5vw; färg: svart; marginal: 0; bredd: 80vw; bakgrundsfärg: vit; stoppning: 3vw; ) tabell ( bakgrundsfärg: rgba(33) , 31, 171, 0,12: 0,5vw; .second_cell ( kantlinje: 0.01vw fast #4c6ea1; ) .third_cell ( kantlinje: 0.01vw dubbel röd; )

Ram stilar

Kantdesignen kan ställas in för varje sida av cellen separat. För att göra detta räcker det att inte ange ett värde i kantstilen, utan lista fyra, motsvarande sidorna av cellen.

Th, td ( padding: 1vw; text-align: left; border-width: 0,5vw; border-color: darkred; border-style: pricked; ) .seven ( border-top-color: skyblue; border-top-style : gräns-höger-bredd: gräns-botten-stil: streckad;

Du kan ange data på en rad genom att ange från ett till fyra olika värden. Var och en blir traditionellt en instruktion för en av parterna.

• Om du ställer in två värden kommer den första att ansvara för de nedre och övre gränserna, den andra - för vänster och höger.
• Av de tre är den första ansvarig för toppen, den andra för vänster och höger och den tredje för den nedersta raden.
• Fyra värden definierar var och en av linjerna unikt, med början från toppen medurs till vänster.

Du kan också specificera utformningen av cellgränser genom att helt enkelt definiera data för varje sida, som visas ovan.

Det finns tio ramstilar totalt. De ändrar alla raden eller tar bort den:

• ingen - ingen gräns;
• dold - mer strikt ingen, blockerar utseendet på egenskapen (i en konfliktsituation);
• prickig - gjord av prickar;
• streckad - prickad;
• fast - fast;
• dubbel — dubbel fast;
• spår - ramen verkar pressas in i ytan;
• ås - konvex linje;
• infälld - faktiskt, för en sida av elementet beter sig som en ås, om den appliceras på hela elementet, är toppen och vänster skuggad, och botten och höger är markerade;
• början - beter sig som ett spår när det appliceras på ena sidan av ett element, det skymmer botten och höger, vilket gör toppen och vänster ljusare.

En av stilarna tillämpas på var och en av cellerna (till den övre och vänstra sidan). För att säkerställa att de inte konkurrerar med varandra får de ”svagaste” de högsta värdena.

Tabell (bakgrundsfärg: rgba(33, 31, 171, 0,12); utfyllnad: 0,5vw; kant-kollaps: kollaps; kant: 0,3vw helt svart; ) th, td (utfyllnad: 1vw; textjustering: vänster; ) .one ( border-top: hidden; border-left: hidden; ) .two ( border-top: 0,4vw dubbel #4c6ea1; border-left: 0,4vw dubbel #4c6ea1; ) .tre ( border-top: 0,5vw fast #4c6ea1; border-vänster: 0.5vw solid #4c6ea1; .four (kant-topp: 0.7vw streckad #4c6ea1; border-vänster: 0.7vw streckad #4c6ea1;) .five (kant-top: 0. ; kant-vänster: 0.8vw prickad #4c6ea1; .six (kant-top: 0.9vw ås #4c6ea1; kant-vänster: 0.9vw ås #4c6ea1; ) .sju (kant-topp: 1vw utgång #4c : 1vw utgång #4c6ea1; .eight (kant-top: 1.1vw groove #4c6ea1; border-left: 1.1vw groove #4c6ea1; ) .nine ( border-top: 1.2vw inset # 4c6ea1; border-left infälld #4c6ea1;

Strukturera materialet

Typen av data som presenteras i en matris kräver ofta modifiering av tabellens gränser, cellramar, rader eller kolumner. För detta kan du använda:

• nollställningslinjer (för kantbredd, ange ett värde på 0px);
• dold.

Fördelen med dolda är dess prioritet. Om regeln med två element samtidigt gäller för gränsen och ett av dem har värdet dolt i gränssnittet, kommer raden inte att visas. Det vill säga att du enkelt kan skapa hela tabellen och sedan selektivt ta bort onödiga ramar.

Att använda dolda på celler gör det omöjligt att återställa gränsen med andra metoder (förutom tungvikt!viktigt). Därför, om du behöver ta bort några av sidorna av cellerna, är det bättre att använda ingen.

Låt oss säga att det finns ett bord. Målet är att ta bort de vertikala gränserna innanför den första raden. Den är märkt med en separat tagg (rubrik), så det finns ingen anledning att gå in i en extra klass. Om du applicerar dold på hela taggen, och anger kant-vänster, kommer en del av bordets sidoram att tas bort tillsammans med de interna ramarna, vilket inte krävdes av villkoret. Om du använder ingen och en matrislinje kommer det att finnas två icke-motstridiga regler för de interna linjerna, och för den yttre kanten kommer ingen att stå i konflikt med regeln som ges till den i tabellen, och sidan kommer att förbli på plats .

Att ta bort individuella cellinjer görs med hjälp av klasser som är tilldelade motsvarande element, vilket visades för individuell inställning av stil, bredd och färg.

Medan det är lättare att ta bort sidokanten i en HTML-tabell genom att hänvisa till matrisens yttre ramar, som anges i tabellen. Det räcker att ange en specifik rad i css.

Tabell (kant-vänster-stil: dold;)

Att ta bort gränser i rader är lätt att implementera med hjälp av gränsegenskapen med värdet gömt i tr. De försvinner inte bara horisontella linjer bord, men även sidobord. Matrisen degenererar till vertikala kolumner.

Tr (kantstil: dold;)

Som en sista utväg, vänd dig till!viktigt. Om du lägger till det efter instruktionen kommer det att få ytterligare prioritet.

HTML-tabellkanter är flexibla och lätta att anpassa. Gränsegenskapsgruppen låter dig dölja element, ändra färg, bredd eller stil. Nackdelen med tabeller är att resultatet av en kombination av regler som tillämpas på ett enskilt element inte alltid är klart förutsägbart. Med tanke på detta rekommenderas det att antingen minska antalet möjliga stilar för kanter eller använda dem selektivt.

Marginaler och utfyllnad är mycket viktiga stilar när du bygger en HTML-sida. De låter dig placera element mer exakt, skapa en ram med nödvändiga luckor etc. Båda stilarna är väldigt lika och har liknande funktioner. Men det finns fortfarande skillnader.

Element kan vara kapslade eller placerade bredvid varandra. Låt oss titta på följande exempel:

Vi har två bord, citron och blå, placerade under varandra. Tabeller består av en cell. Det finns ett rött block i den första tabellcellen. Med hjälp av detta exempel, låt oss titta på hur marginaler och indrag fungerar.

Fält ställs in efter stil stoppning. Den här stilen gäller endast containerelement, som kan innehålla andra element. Stilen låter dig ställa in marginalen mellan kanterna på ett element och dess innehåll. Stil marginal låter dig ställa in indrag från ett element till de närmaste gränserna för ett annat element. Kanterna för ett annat element kan vara kanterna på den överordnade behållaren, såväl som kanterna på själva sidan.

Det finns flera sätt att ställa in dessa stilar. Ange till exempel storleken på alla marginaler eller indrag direkt med ett argument i någon måttenhet (px, ex, em, pt, cm och så vidare):

marginal: 3px;

stoppning: 3px 5px;

den första är marginalen/indraget överst, den andra är både vänster och höger, den tredje är längst ner. Med fyra argument:

marginal: 3px 5px 2px 6px; stoppning-top, stoppning-höger, stoppning-botten, stoppning-vänster, den första är marginalen/mellanrummet överst, den andra är till höger, den tredje är längst ner, den fjärde är till vänster. Det är lätt att komma ihåg: den första är från toppen, sedan medurs. Dessutom kan du ställa in marginaler och utfyllnad för en specifik kant separat, med lämpliga stilar:, marginal-top, marginal-höger, marginal-botten marginal-vänster

. Värdet på dessa stilar kan bara vara ett argument, som anger mängden marginal/utfyllnad för en given sida.

stoppning: 5px;

Som ett resultat kommer sidan att ändras till följande:

margin-top: 5px;

Observera att vi ställer in indraget specifikt till tabellen, och inte till tabellcellen, som är fallet med fält. Här är resultatet:

Förresten, i det första fallet (gapet mellan det röda blocket och gränserna för den överordnade cellen), kan samma effekt uppnås genom att sätta blockindragen. I allmänhet, om något inte är klart, låt oss veta i kommentarerna.

/html>

Hur man installerar MiFlash och drivrutiner för Xiaomi-smarttelefoner

Registreringsskydd mot spam joomla 1

Människors integritetspolicy Vad är syftet med denna policy

Sony Ericsson WT19i Hemliga koder Vad är fjärrupplåsning av telefon

Firmware och vissa funktioner

Är det möjligt att ta bort TEMP-mappen?

Vad är ett WiFi-nätverks SSID-namn och hur man ändrar namnet på en router TP-Link, Asus, Zyxel Keenetic, D-Link, Mercusys

RaidCall för Android: ett kommunikationsverktyg som alltid finns till hands

• Hem
• Om tidningen
• Kontakter
• Reklam

Copyright © 2024 sukachoff.ru - Windows. Virus. Bärbara datorer. Internet. Kontor. Verktyg. Förare