CSS: table design. Voorbeelden van inschrijving

Het maken van tabellen met CSS - van les interessant en verantwoordelijk. Aanpak van deze zaken moeten competent, met kennis van alle mogelijke stijlen. Daarnaast is het noodzakelijk om een gevoel van schoonheid om niet af te schrikken hun creativiteit bezoekers bezitten.

De tafels kunnen bijna alles transformeren. Mooi design omvat het gebruik van CSS tabellen ontwerp grenzen, tafel achtergrond, cel achtergrond, de kloof tussen hen en nog veel meer. Denk aan de meest elementaire.

tabelrand

CSS table style design brengt altijd een spel met een rand (frame). Alle standaard lijsten zijn niet contouren frame. Dat is, gelijk aan 0 pixels. Maar dit kan worden gecorrigeerd door de accommodatie grens.

U kunt het buitenste frame voor de hele tafel te specificeren:

table {border: 3px effen zwart; }

Dankzij deze lijn op alle tafels op de site die deze stijl gebruikt is zwart frame. Merk op dat alleen de grens aan de randen, maar niet in de tabel. Voor cellijnen en kader anders vermeld.

th, td {border: 3px solid black;}

De dikte en de kleur, kunt u elke opgeven. Houd in gedachten dat de grenzen niet worden verdubbeld wanneer het splitsen van cellen.

Het woord duidt een continue vaste registratie. U kunt andere waarden op te geven.

Het wordt meestal gebruikt solide frame, als het lijkt aantrekkelijker en niet de aandacht afleiden van de belangrijkste inhoud van de site.

border eigenschap kan ook worden opgegeven op het bord. De grens kan alleen worden ingesteld voor de boven-, onder-, linker- of rechterzijde. Omdat in sommige gevallen is het geen haalbare optie is met het frame voor de hele tafel in een keer.

table {border-top: 1px solid red; }

Zo kunt u het frame voor de top van alleen de tabel. Net zoals bij andere partijen, in plaats van alleen top schrijven: rechts, links of onderkant.

table header

Table header kan worden opgegeven met de tag . Deze tag kan in de CSS om veel woningen te fine-tuning te registreren. De CSS tafel ontwerp is goed omdat het mogelijk is om de elementen te manoeuvreren zoals u dat wilt.

Deze titel wordt weergegeven op dezelfde manier als een standaard literatuur (bijvoorbeeld "Tabel 1").

U kunt de locatie van de titel en eigendom caption-side (boven of onder) op te geven. Het uitlijnen van de linker of rechter wordt bepaald door de eigenschap text-align.

achtergrond tafels

Achtergrond van de tafel kan een kleur of patroon zijn. Color stelt een eigenschap background-color. De namen van de eigenschappen volledig in overeenstemming met toepassingen in spraak. Het vergemakkelijkt vele malen te slaan.

De kleur kan worden aangegeven als de naam, en de verschillende coderingen. Daarnaast kunt u de volgende informatie bevatten:

• Transparant - Transparant.
• Erven - kleur dezelfde is als die van het bovenliggende element.
• Initial - default.

Option met transparantie kan worden gebruikt in die gevallen waarbij alle tabellen in de tekst in het CSS-bestand worden gemaakt in één kleur, maar in dit geval is er geen behoefte.

Bovendien kan de achtergrond een afbeelding zijn. Om dit te doen, in de stijl voorgeschreven background-image eigenschap. Het pad is als volgt:

url ( 'URL')

Het pad naar het bestand kan hetzij relatief of absoluut zijn.

Ingewikkelder fill kan worden gedaan met een gradiënt:

• lineaire gradiënt ();
• radiaal-gradiënt ();
• herhalen-lineaire gradiënt () en het herhalen radiale gradiënt () - gradiënt herhaald.

achtergrond cel

In aanvulling op een achtergrond in het algemeen, kunt u een gestreepte achtergrond in kolommen of rijen te geven. Voor de registratie van het pand is heel vaak gebruikt, omdat de visuele scheiding van de lijnen gemakkelijker maken om informatie te lezen.

In aanvulling op de afwisseling, en u kunt het nummer van een bepaalde kolom of rij te specificeren. Bijvoorbeeld als volgt uit:

• tr: nth-child (even) {...} - specificeren interlaced;
• tr: n-kind (1) {...} - indicatie van de eigenschappen van een bepaalde rij;
• td: n-kind (even) {...} - vermelding van afwisselende kolommen;
• td: n-kind (1) {...} - een indicatie van de eigenschappen van een bepaalde kolom.

Naast de volgorde en aantallen kunnen worden opgegeven - de eerste (td: first-child) of laatste (td: last-kind).

De ruimte tussen de cellen

In CSS, tabel ontwerp kunt u de ruimtes tussen cellen te verwijderen. Standaard zijn ze. Bijvoorbeeld, als u het frame in de tabel zonder dat de afstand tussen de grenzen, het zal hier zijn op dit resultaat.

Mee eens, het ziet er niet erg mooi en het is niet handig om te lezen. Gebruikers zullen rimpel in de ogen als gevolg van deze hebben. Verwijder deze gaten kan worden door het schrijven van zo'n regel in de tabel stijl:

border-collapse: collapse

Maar het komt ook voor dat de afstand, integendeel, moet worden verhoogd. Bovendien kan de afmeting van de spleten worden aangegeven tussen kolommen en tussen de lijnen. Aan te geven dat een waarde (in plaats instorten):

border-collapse: scheiden

Maar een dergelijke actie zal aangeven dat het noodzakelijk is om de cellen te scheiden. Zoals het was hun deel, aangegeven additional property:

border-spacing: 20px.

Als u wilt een andere afstand tussen de rijen en kolommen heeft ingevoerd, betekent dit twee dingen:

border-spacing: 10px20px.

Het verschil in de browsers

Houd in gedachten dat in de CSS design tables kan er anders uitzien, afhankelijk van de browser. Bijzonder slecht is het geval met oudere versies, dat innovaties in CSS niet wordt ondersteund.

Het bovenstaande is een voorbeeld van het frame dikten in digitale waarden.

Voor dit voorbeeld is de dikte van de frames van de constanten.

randstijlen verschillen ook sterk.

Daarom is de ontwikkeling te zien altijd het resultaat in verschillende browsers.

In CSS ontwerp tabellen aan te raden om het type browser te controleren. Vooral groot probleem gebruikt te worden voor gebruikers met oudere versies van Internet Explorer.

Zeer geavanceerde ontwikkelaars kunnen, afhankelijk van de browser om totaal verschillende CSS-bestanden aan te sluiten. En iemand een check-in elk of een bepaalde stijl (klasse).

De meeste problemen komen voort uit de schaduwen.

CSS: Tabelopmaak Voorbeelden

Registratie kan vrij worden gevarieerd. Het hangt allemaal af op de hele site en het ontwerp. Alle moeten worden gecombineerd en bonte kleuren. Ook maakt een grote rol en smaak ontwikkelaar. Gevoel voor schoonheid is allemaal verschillend.

We geven enkele voorbeelden van de verschillende tabellen. Bovenstaande afbeelding toont het gebruik van tilt en spelen met de achtergrondkleur en de grens.

Velen zullen interessant voorbeeld van mooie nette ontwerp dat niet in het oog gebruikers zal snijden zijn. Deze uitvoering is geschikt in vrijwel elke situatie.

De randen kunnen worden afgerond. Het ziet er vrij aardig.

conclusie

Zoals u kunt zien, voor het verschijnen van de tabellen in CSS zijn er veel tools. Elke parameter is ook een enorme hoeveelheid waarde opties. Als je het allemaal tegelijk gebruikt, kunt u meesterwerken creëren. Vooral als je dat doet adaptief ontwerpen voor alle browsers.

Het belangrijkste in het ontwerp - niet overdrijven met effecten. Alles moet worden gedaan met mate. In eerste instantie, de lay-out willen experimenteren en onmiddellijk te gebruiken al hun kennis. Als gevolg van de tabel zijn oververzadigd eigenschappen. Probeer deze fouten te voorkomen.

Bovendien kunnen sommige parameters met elkaar interfereren. Bijvoorbeeld, is er geen behoefte aan te geven de achtergrondkleur van de tafel, terwijl als er stilbeeldachtergrond, die de opgegeven kleur zullen overlappen in te stellen.