HTML-tabeller: Alt hvad der er at vide om dem

At dømme efter det faktum, at vi oprettede wpDataTables, er det ingen hemmelighed, at vi kan lide tabeller. Så meget, at vi skrev denne lange artikel om dem for at hjælpe dem af jer, der er begyndere og ønsker at lære om HTML-tabeller.

HTML-tabeller bruges til at vise data, der giver mening i regnearkssoftware. De består af rækker og kolonner og bruges ofte på websteder til effektiv visning af tabeldata.

Så hvordan laver man en tabel i HTML? Hvornår skal jeg bruge det, og hvorfor? Hvad er gode HTML-tabeleksempler? I dag skal vi besvare disse spørgsmål og mere for at hjælpe dig med at forstå alt, hvad der er at vide om HTML-tabeller.

Indholdsfortegnelse

  • Introduktion til tabeller
  • Bord styling
  • HTML-tabeller ofte stillede spørgsmål
  • HTML-tabelgeneratorværktøjer

Introduktion til tabeller

HTML-tabellen bruges til at arrangere data (såsom tekst, billeder, links osv.) I det tabelformede design - dybest set rækker og kolonner.

Hvornår skal man bruge tabeller?

En tabel i HTML giver meget mening, når du vil organisere data, der ser bedst ud i et regneark. En HTML-tabel er en fantastisk måde at vise ting som f.eks. Økonomiske data, kalendere, priser, sammenligning af funktioner, panelet ernæringsfakta, bowlingresultater og mange andre tabeloplysninger.

Der er en chance for, at du har hørt, at bordene var usemantiske. Det er dog slet ikke sandt. Tabeller angiver semantisk tabeldata, og de er det bedste valg til visning af data af denne art.

Hvornår IKKE skal bruge tabeller

Mens nogle data ser godt ud i tabeller, er der ting, der ikke bør arrangeres på den måde, simpelthen fordi det ikke giver mening. Der er også nogle andre upassende CSS-tabelanvendelser, der bør undgås, hvis det er muligt.

For eksempel bør du aldrig bruge tabeller til layout . Sagen er, at tabelelementer semantisk beskriver tabeldata og brug af dem til andre formål er et brud på semantisk pligt.

Den generelle regel er, at webstederne skal være tilgængelige. En del af tilgængeligheden er skærmlæsere, der læser tabeller fra top til bund, venstre mod højre. Med tabellerne i HTML bestemmes rækkefølgen af, hvordan webstedet præsenteres, af visuelle valg i stedet for tilgængelighedsvalgene. I sådanne tilfælde fungerer skærmlæsere ikke altid, som du vil have dem til.

Tabelelementer

HTML-tabeller leveres normalt med en kort beskrivelse af deres formål. Nogle gange gives en mere detaljeret beskrivelse via resuméattributten til gavn for folk, der bruger tale- eller blindeskriftbaserede brugeragenter.

Tabelrækker kan grupperes i hoved-, fod- og kropssektioner (via THEAD- , TFOOT- og TBODY- elementerne). Brugeragenter kan udnytte hoved / krop / foddel til at understøtte rulning af kropssektioner uafhængigt af hoved- og fodsektioner. Når vi udskriver de lange HTML-tabeller, vises oplysninger om hoved og fod normalt på hver side, der indeholder tabellen.

Hvis du vil give mere strukturel information, kan du også gruppere kolonner. Derudover kan kolonneegenskaber deklareres i starten af tabeldefinitionen ved hjælp af COLGROUP- og COL- elementerne.

Tabelceller indeholder overskriftsoplysninger og / eller data, og de kan spænde over flere kolonner og rækker. Når du markerer hver celle med HTML 4-tabeltilstand, kan de ikke-visuelle brugeragenter lettere kommunikere oplysningerne til brugeren. Dette er ikke kun nyttigt for brugere med handicap, men det gør det muligt for trådløse browsere med begrænset visning at håndtere HTML-tabeller.

Vi nævnte allerede, at tabeller HTML ikke skulle bruges til layout. I stedet skal du bruge stilark, når det er nødvendigt for at opnå bedre resultater og bedre tilgængelighed.

Hoved og krop

Lad os se på et grundlæggende eksempel på HTML-tabelstil:

Forestil dig at se på en række (vandret) for at se en enkelt person og relevante oplysninger om dem. Når du kigger op og ned i en kolonne (lodret), får du en fornemmelse af datamængden eller mønsteret.

Den første række er overskriften på tabellen, og den indeholder ingen data - kun titlerne på kolonnerne. Du kan semantisk angive, at det er tilfældet med annonce> element, som ville pakke firs t (det kunne pakke så mange rækker efter behov, som alle er headeroplysninger).

Når du bruger ad>, der skal være nej, der er en alvorlig nedgang i

. Alle rækker skal være inden ei ther th e < ; thead & gt ;, , eller.

Sidefod

Sammen med annonce> ; og & lt; tbody> ; der e er til indpakning af tabelrækker, der angiver sidefoden af den mulige. Ligesom bedst til semantisk at angive, at dette ikke er datarækker, men supplerende information.

Placeringen af ot> er unik i HTML, da det kommer efter & lt; thead> og være i forgrunden

! Så selvom det måske synes logisk at finde det i slutningen af
, det er faktisk ikke tilfældet. Da sidefoden indeholder de oplysninger, der er nødvendige for at forstå tabellen, placeres den foran dataene i kildeordren for bedre tilgængelighed.

Tabelfod kan f.eks. Bruges i lange HTML-tabeller til at gentage overskriften. Det kan dog også bruges til andre formål, for eksempel med et layout, hvor elementernes placering hopper rundt fra bund til top afhængigt af behov.

Tabelelementer og deres attributter

HTML-tag

Det ot> element identificerer en eller mor e

elementer indeholdende resuméindhold i en tabells kolonner. Elementet skal være direk tionsfaktor for a
element.

I HTML5, ot> kan placeres enten før eller efter & lt; tb ody & gt; og

elementer, men skal forekomme en ft is enhver < ; capti på>, og elementer.

HTML-tag

Det dy> element skal være en direkte efterkommer af et & lt; tabel> element og bruges til at tandpleje

elementer, der udgør kroppen af bordet. Det element skal altid komme efter et element og kan komme før eller efter et element.

HTML-tag

Egenskaber

  • Den < tr> element kan man gruppe sammen ethe r & l t; th > eller

    element kan være ad irect barn af en
    værdier i en enkelt række med tabeloverskrift eller dat a-værdier. Det
    elem ent eller ne sted wi thin a parent t ,, or element.

    HTML-tag

    Egenskaber

    Det on> element bruges til at tilføje en billedtekst til en HTML-fane . En < ; billedtekst> skal vises i et HTML-dokument som den første efterkommer af et leje

    , men det kan placeres visuelt i bunden af ​​tabellen med CSS.

    kol

    Egenskaber

    Det ol> -element, typisk implementeret som et underordnet element i en << gruppe>, kan bruges til at målrette mod en kolonne i en HTML-tabel.

    colgroup

    Egenskaber

    Det op> element bruges en overordnet container til et eller flere elementer, der bruges til at målrette kolonner i en HTML-tabel.

    Grundlæggende styling

    Det er let at skelne mellem forskellige dele af bordet, hvis bordet har forskellige farver og linjer. CSS-bordgrænse er et andet almindeligt element. Som standard er alle tabelceller adskilt fra hinanden med 2 pixel. Mellem den første række og resten vil du bemærke et lille ekstra hul, der skyldes, at standardrandafstanden anvendes på annonce> ; og & lt ; tbody> skubber dem lidt ekstra fra hinanden.

    Du kan styre afstanden:

    table {border-spacing: 0.5rem;}

    Eller du kan bare fjerne dette mellemrum:

    table {border-collapse: collapse;}

    HTML-bordpolstring, HTML-tabeloverskrift, grænser og fremstilling

    venstrejusterede elementer er en enkel, men alligevel effektiv måde at style dine HTML-tabeller på.

    Vigtige stilregler for borde

    CSS-tabeller og deres egenskaber fungerer godt, hvis du bruger dem rigtigt. Der er dog nogle detaljer at huske på. For eksempel, hvis du anvender en bestemt skrifttypefamilie til tabellen, men derefter en anden til cellen - vinder cellen, fordi det er det faktiske element med teksten indeni.

    Disse egenskaber er enten unikke for tabelelementer, eller de opfører sig entydigt på tabelelementer.

    lodret-justere

    Mulige værdier : basislinje, sub, super, tekst-top, tekst-bund, midt, top, bund,%, længde

    Justerer indholdet i en celle. Fungerer særlig godt i tabeller, selvom kun top / bund / midter giver meget mening i den sammenhæng.

    hvidt rum

    Mulige værdier: normal, pre, nowrap, pre-wrap, pre-line

    Styrer, hvordan tekst ombrydes i en celle. Nogle data skal muligvis være alle på én linje for at give mening.

    grænsekollaps

    Mulige værdier: kollaps, adskil

    Anvendes på tabellen for at afgøre, om grænser kollapser i sig selv (som ligesom margen kun kollapser tovejs) eller ej. Hvad hvis to grænser, der kollapser i hinanden, har modstridende stilarter (som farve)? De typografier, der anvendes på disse typer af elementer, "vinder" efter "styrke": celle, række, række, kolonne, kolonnegruppe, tabel.

    grænseafstand

    Mulige værdier: længde

    Hvis grænsekollaps er adskilt, kan du angive, hvor langt celler skal være adskilt fra hinanden. Den moderne version af attributten cellespacing. Og når man taler om det, er polstring den moderne version af attributten cellpadding.

    bredde

    Mulige værdier: længde

    Bredde fungerer på bordceller næsten om, hvordan du tror, ​​det gør, undtagen når der er en slags konflikt.

    For instance, if you tell the table itself to be 400px wide then the first cell of a three-cell row to be 100px wide and leave the others alone, that first cell will be 100px wide and the other two will split up the remaining space.

    But if you tell all three of them to be 20000px wide, the table will still be 400px and it will just give each of them a third of the space. That’s assuming white-space or elements like an image don’t come into play.

    border

    Possible values: length

    Border works on any of the table elements and just about how you would expect. The quirks come in when you collapse the borders.

    In this case, all table cells will have only one border width between them, rather than the two you would expect them to have (border-right on the first cell and border-left on the next cell).

    In order to remove a border in a collapsed environment, both cells need to “agree” to remove it. Like this:

    td:nth-child(2) { border-right: 0; } td:nth-child(3) { border-left: 0; }

    Otherwise, source order/specificity wins which border is shown on which edge.

    table-layout

    Possible values: auto, fixed

    auto is the default. The width of the table and its cells depends on the content inside.

    If you change this to fixed, the table and column widths are set by the widths of table and col elements or by the width of the first row of cells.

    Cells in subsequent rows do not affect column widths, which can speed up rendering. If the content in subsequent cells can’t fit, the overflow property determines what happens.

    Table Border

    Tabelkant CSS gør det lettere at se tabellen, og det er også den bedste metode til visning af grænser. Tilføj typografier inden for de tags, der er placeret i hovedelementet, for at vise rammen for tabel-, th- og td-elementerne i dit HTML-dokument.

    Tilslutning af celler

    For at forstå, hvordan tilsluttede celler fungerer, er vi nødt til at forklare de to attributter, der kan gå på ethvert tabelcelleelement: HTML-rækkespænd og HTML-kolspan. Hvis en td har en colspan på 2 (dvs.

    ) optager pladsen i to celler i træk vandret, selvom det stadig ville være en enkelt celle. Det samme gælder for rækkespænd, men lodret.

    Rowspan er lidt sværere at forstå, simpelthen fordi kolonner er grupperet forskelligt end rækker. For eksempel med colspan får du den endelige værdi ved blot at tilføje værdierne for hver tabelcelle i rækken. Med rækkespænding på den anden side får rækken under den +1 til sit celleantal og har brug for en tabelcelle mindre for at fuldføre rækken.

    Nestende borde

    "Indlejrende tabeller" betyder simpelthen at placere et bord inde i et andet bord, der er gennemførligt, men du skal medtage den komplette struktur med

    Der er dog situationer, hvor dette er absolut nødvendigt, og ja, det er gennemførligt. Så hvis du f.eks. Har brug for at importere indhold fra andre kilder, kan du importere en tabel og placere den inde i din tabel.

    Zebra Striping Tables

    Farver er meget nyttige for brugerne til let at få øje på, hvad de leder efter i tabellen. Du kan enten indstille en baggrundsfarve til tabelcelleelementerne eller du kan indstille dem på selve tabelrækkerne.

    Dette er det mest basale eksempel:

    tbody tr:nth-child(odd) {background: #eee; }

    Brug af tbody er nyttigt, hvis du ikke vil stribe header og footer-rækker. Hvis du ikke vil lade det, der er under, vise sig, kan du også indstille de lige rækker.

    Hvis du har brug for at støtte browsere, der ikke forstår: nth-child () (temmelig forbandet gammel), kan du bruge jQuery til at gøre det.

    Fremhævning af rækker og kolonner

    Fremhævning af rækker er ret let; alt hvad der kræves er at tilføje et klassenavn til en række.

    At fremhæve søjler kræver derimod lidt mere indsats. Du kan bruge ol> element, som giver dig mulighed for at indstille typografier for celler, der vises i den valgte kolonne. For eksempel skal en tabel med 4 kolonner i hver række have 4 elementer.

    Sådan centreres en HTML-tabel

    Hvordan centrerer man en tabel i HTML? Dette spørgsmål er ret almindeligt blandt mennesker, der designer deres første HTML-tabeller. Sagen er, at tekstjustering: center centrerer ikke en tabel som helhed - den centrerer bare teksten inde i cellerne.

    Centrering af hele tabellen kræver, at venstre og højre margen er indstillet til automatisk , og top- og bundmargener er indstillet til de værdier, du har brug for.

    Sig, at du vil have den øverste og nederste margen på din tabel til at være en tom linje (1 em). CSS-koden i le> tag er simpelthen:

    element. Det er dog måske ikke den bedste idé på grund af den forvirrende markering og dårligere tilgængelighed.
    ;”>

    If you wish to wrap text next to a table, use float:left to float the table to the left of the subsequent text. To put a little space between the table and the text, you can also put the right margin on the table, like this:

    ;”>

    If you want the table to be to the right of the neighboring text, use float:right instead. You can also set the left margin:

    ;”>

    Something to keep in mind: Make sure you put the text that should be next to the table after the closing

    tag for the table. Floats float next to subsequent content in the code, not content that precedes the float.

    HTML tables frequently asked questions

    Can I nest tables within tables?

    Yes, you can place an existing table inside the cell of another table. There is an example mentioned earlier in this article.

    Keep in mind that the older browsers have problems with nested tables if you don’t explicitly close your TR, TD, and TH elements. To avoid these issues, include every tr>, td>;, and tag, even though the HTML specifications don’t require them.

    Also, try not to nest tables more than a few rows deep into the table because the older browser versions often have problems with that. You can use the ROWSPAN and COLSPAN attributes to minimize table nesting.

    Finally, be especially sure to validate your markup whenever you use nested tables.

    How can I use tables to structure forms?

    Within a TD element within a table, there can be small forms placed if you want to position a form relative to the other content. However, if you want to position the form-related elements relative to each other, it doesn’t really help.

    If you want to do that, the entire table must be within the form. You can’t start a form in one TH or TD element and end in another. You can’t place the form within the table without placing it inside a TH or TD element. You can put the table inside the form, and then use the table to position the INPUT, TEXTAREA, SELECT, and other form-related elements, as shown in the following example.

    Can I use percentage values for

    ?

    HTML 3.2 og HTML 4.0 specifikationerne tillader kun heltal værdier (der repræsenterer et antal pixels) for WIDTH attributten for TD elementet. He HTML 4.0 DTD tillader derimod ikke-heltal værdier (såsom procenter), så en HTML-validator klager ikke over

    .

    Husk, at Netscape og Microsofts browsere fortolker procentværdier for

    anderledes. På den anden side matcher deres fortolkninger (og de af andre bordbevidste browsere), når de kombineres med

    Hvorfor ikke

    . I sådanne tilfælde kan procentværdier bruges sikkert, selvom de er forbudt af de offentlige specifikationer.

    Margenen mellem indholdet og kanten af ​​displayområdet er ret smal med grafiske browsere. Navigator giver altid plads til en rullebjælke til højre. Men når dokumentet ikke er lang nok til at kræve rulle, vises rullepanelet ikke, og dette efterlader dig med margenen til højre, som ikke kan fjernes.

    Hvorfor er der ekstra plads før eller efter mit bord?

    En ugyldig HTML-syntaks kan forårsage ekstra plads før og efter HTML-tabeller. Den mest almindelige årsag er det løse indhold i tabellen (dvs. indhold, der ikke er inde i et TD- eller TH- element).

    Når det kommer til det løse indhold, er der ikke en standard måde at håndtere det på. Nogle browsere viser det før eller efter tabellen. Når det løse indhold kun indeholder flere linjeskift eller tomme afsnit, vises alt dette tomme område før eller efter selve tabellen.

    Løsningen er at rette HTML-syntaksfejlene. Alt indhold i en tabel skal være inden for et TD- eller TH- element.

    Er der nogen problemer med at bruge tabeller til layout?

    Det korte svar ville være - ja .

    For at browserne kan vise tabellen, skal HTML-attributterne, især HEIGHT- eller WIDTH- attributterne være kendt. Sagen er, at hele tabellen skal downloades med de kendte dimensioner, før den gengives. Hvis de ovennævnte attributter ikke er kendt, kan gengivelsesprocessen blive forsinket.

    Derudover, hvis noget af bordets indhold er for bredt til det tilgængelige visningsområde, skal tabellen strække sig for at få vist det store indhold. Resten af ​​indholdet justeres derefter til at passe til det store bord i stedet for at passe til det tilgængelige visningsområde. Som et resultat heraf skal brugerne rulle vandret for at kunne læse indholdet. De trykte versioner kan også ende med at blive beskåret.

    Hvis indholdet vises på et display snævrere end forventet, forårsager tabellerne med fast bredde de samme problemer som andre overdimensionerede tabeller. Hvis skærmene er bredere end forventet, spildes meget af skærmen med de ekstremt brede margener. Hvis læserne har brug for større skrifttyper, vises indholdet med kun få ord pr. Linje.

    En af de vigtigste ting at huske på er den korrekte syntaks. Browserne klarer sig ikke godt med ugyldig syntaks. Indlejrede tabeller vises muligvis ikke korrekt med korrekt syntaks hverken i ældre versioner af Netscape Navigator.

    Så er der også nogle browsere, der ignorerer tabeller fuldstændigt, hvilket betyder, at de også ignorerer det layout, der er oprettet med HTML-tabellerne. Derudover ignorerer søgemaskiner dem også. Det, du normalt ser i søgeresultaterne, er normalt teksten i begyndelsen af ​​et dokument. Som et resultat heraf vises navigationslinks i søgningen, hvis en tabel bruges til layout, i stedet for det faktiske indhold.

    Nogle versioner af Navigator har problemer med at linke til navngivne ankre, når de er inde i en tabel, der bruger ALIGN- attributten. De forbinder det navngivne anker med toppen af ​​tabellen i stedet for indholdet af ankeret. Hvis du ikke bruger ALIGN- attribut på dine borde, kan dette problem helt undgås.

    Alt dette sagt, hvis du insisterer på at bruge HTML-tabeller til layout, kan omhyggelig markering hjælpe dig med at minimere de relaterede problemer. Undgå at placere bredt indhold i tabeller som brede billeder, PRE- elementer med lange linjer, lange URL'er og lignende.

    Brug flere uafhængige tabeller i stedet for et enkelt helsides layout. For eksempel kan du bruge en tabel til at lægge en navigationslinje øverst eller nederst på siden og lade hovedindholdet være helt uden for alle layouttabeller.

    Hvordan tilføjer jeg en billedtekst til dit bord med?

    Du tilføjer en billedtekst til dit bord ved at placere det i en

    bruge den fulde browserbredde?
    element og indlejring af det inde i & lt; tabel> elementet. Du bør sætte det lige under den åb ning

    tag.
    Your caption should be here ...

    Formålet med billedteksten er at indeholde en beskrivelse af tabelindholdet. Dette giver læserne en hurtig idé om, hvorvidt tabellen indeholder det indhold, de søger efter. Det er dog især nyttigt for synshandicappede brugere, der kan undgå at få skærmlæseren til at læse meget af tabelindholdet, inden de indser, hvad tabellen handler om.

    En billedtekst er placeret direkte under le> tag.

    Bemærk: Resumeattributten kan også bruges på le> element for at give en beskrivelse - dette læses også op af skærmlæsere. Vi vil i stedet anbefale at bruge < ; billedtekst> -elementet, fordi resuméet udfases af HTML5-tabel-specifikationen og ikke vises på siden.

    Bedste HTML-tabelgeneratorværktøjer

    If you don’t want to deal with a bunch of HTML table code, using a good table generator tool could be really useful. Creating a table in HTML with a tool like this requires no knowledge of developing languages and it is pretty fast and simple.

    In addition to that, the majority of the best tools of this sort are completely free of charge and everyone can use them. Basically, all you have to do is import the data, and customize the table (for example, HTML table border style, HTML table formatting, CSS table width, CSS table background color, cellspacing, cellpadding etc).

    Once you are done with that, the generator will give you your table HTML code that you will simply copy and paste to your website. Easy-peasy.

    Why Should You Use HTML Table Generator Tools

    Designing a table from scratch is no easy task. Making it perfectly functional is an uphill battle and it takes a lot of time and effort — not to mention that the results often end up being less than perfect.

    Instead of writing lines and lines of code with your notepad, you can save yourself a lot of time and trouble with the right HTML table generator tool. Not only is it easier but the results are often better than when you try to build the whole thing yourself. Not to mention how much time it will save you, and we all know time is money.

    HTML table generator tools

    Tables generator

    Very useful HTML table generator tool. Easy to use and it allows you to choose the theme you like best. You can learn more about it on the official website.

    Quackit

    A simple and easy-to-use tool that also happens to be free of charge.

    Truben

    Truben allows you to make all kinds of HTML tables quickly and easily.

    Html-tables

    A handy tool that works similarly to word processors. It lets you create beautiful tables free of charge.

    CSS Table generator

    Great tool for creating stylish tables without the use of images.

    Tablestyler

    Use table CSS elements and create gorgeous HTML tables with this online tool.

    Textfixer

    A simple tool for creating your favorite table style.

    Accessify

    One of the simplest tools; perfect for people with little technical knowledge and/or slow internet connection.

    RapidTables

    This tool comes with a variety of generating options and creating great HTML tables is one of them.

    Tableizer

    A useful generator for designing HTML tables out of spreadsheet data.

    Ending thoughts on learning about HTML Tables

    Creating beautiful and functional HTML tables is no easy task. If you want to build them from scratch, you have to have a certain amount of coding knowledge and developing experience because there are many things to consider if you want the table display the content properly.

    If, on the other hand, you are looking for a quick solution that requires no coding experience, you could always consider using one of many handy table generator tools. Not only will they save you a lot of time and trouble, but the results will also be amazing.

    If you enjoyed reading this article about HTML tables, you should also read these:

    • CSS tables and their code that you can use
    • Building Responsive Tables with CSS & HTML or WordPress
    • jQuery Table Plugins You Should Check Out

    Originally published at wpdatatables.com on October 31, 2018.