{"id":226248,"date":"2022-08-29T15:28:00","date_gmt":"2022-08-29T12:28:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226248"},"modified":"2022-11-08T03:06:59","modified_gmt":"2022-11-08T00:06:59","slug":"hur-man-centrerar-en-tabell-med-css-snabbguide","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/hur-man-centrerar-en-tabell-med-css-snabbguide\/","title":{"rendered":"Hur man centrerar en tabell med CSS (snabbguide)"},"content":{"rendered":"\n

Anv\u00e4ndningen av tabeller i webbdesign har en intressant historia. F\u00f6re antagandet av CSS anv\u00e4ndes tabeller inte bara f\u00f6r att visa tabelldata p\u00e5 ett konventionellt s\u00e4tt utan anv\u00e4ndes ist\u00e4llet mer vanligt f\u00f6r att styra kompletta sidlayouter.<\/p>\n

D\u00e5 anv\u00e4ndes HTML-tabeller<\/a> f\u00f6r att definiera b\u00e5de strukturen och det visuella utseendet p\u00e5 webbsidor, d\u00e4r placeringen av tabellen kunde specificeras i HTML direkt. Till exempel, f\u00f6r att st\u00e4lla in justeringen av en tabell till mitten, kan man helt enkelt skriva:<\/p>\n

<table align=\"center\"><\/code><\/pre>\n
Att justera dina tabeller p\u00e5 det h\u00e4r s\u00e4ttet \u00e4r dock inte l\u00e4ngre korrekt och har f\u00f6r\u00e5ldrats i HTML5. Det beror p\u00e5 att moderna webbstandarder dikterar separationen av struktur (HTML) och stil (CSS), och ovanst\u00e5ende metod bryter mot den principen.<\/p>\n
HTML ska aldrig anv\u00e4ndas f\u00f6r att st\u00e4lla in hur ett element visas; det \u00e4r nu CSS jobb. S\u00e5 vad \u00e4r det korrekta s\u00e4ttet att centrera en tabell i CSS?<\/a> I den h\u00e4r artikeln av v\u00e5rt team p\u00e5 wpDataTables tar vi itu med den h\u00e4r fr\u00e5gan och visar dig n\u00e5gra tips om hur du justerar dina tabeller korrekt.<\/p>\n
Vi kan ett och annat om tabeller, med tanke p\u00e5 att vi har skapat ett fantastiskt WordPress-bordsplugin<\/a>, s\u00e5 l\u00e5t oss dyka in.<\/p>\n
Hur kan jag anv\u00e4nda CSS f\u00f6r att centrera en tabell?<\/h3>\n
CSS st\u00e4ller in utseendet p\u00e5 sidan, vilket g\u00f6r att du kan kontrollera utseendet och placeringen av varje element, inklusive tabellelementet och alla dess underelement som th, tr och td.<\/p>\n
F\u00f6rst till kvarn, l\u00e5t oss g\u00e5 igenom det "r\u00e4tta" s\u00e4ttet att centrera en tabell med CSS. Om din h\u00f6gra och v\u00e4nstra marginal \u00e4r lika v\u00e4rdefull, b\u00f6r moderna webbl\u00e4sare visa tabellen centrerad. Ett enkelt s\u00e4tt att uppn\u00e5 detta \u00e4r att ha b\u00e5da marginalerna inst\u00e4llda p\u00e5 auto.<\/p>\n
Ett exempel p\u00e5 hur man skriver detta i CSS \u00e4r nedan:<\/p>\n
table<\/code><\/pre>\n
Observera att du inte bara kan centrera tabellen p\u00e5 samma s\u00e4tt som du skulle g\u00f6ra med text \u2014 t.ex. genom att anv\u00e4nda "text-align: center". Detta beror p\u00e5 att tabellelementet \u00e4r ett element p\u00e5 blockniv\u00e5, i motsats till ett inline-element. "text -align: center" kommer bara att centrera inlineinneh\u00e5ll, s\u00e5som texten i tabellen, snarare \u00e4n sj\u00e4lva tabellen.<\/p>\n
Men f\u00f6r \u00e4ldre versioner av Internet Explorer finns det en bugg d\u00e4r element p\u00e5 blockniv\u00e5 behandlas som inline-element. S\u00e5ledes \u00e4r det enda s\u00e4ttet att centrera en tabell f\u00f6r att fungera med vissa versioner av IE att uttryckligen st\u00e4lla in "text-align: center" p\u00e5 det \u00f6verordnade elementet i tabellen (t.ex. body-elementet som visas nedan):<\/p>\n
body {<\/code><\/pre>\n
Du kan testa hur olika webbl\u00e4sare kommer att bete sig med olika stilar, antingen genom att anv\u00e4nda "margin-left: auto; margin-right: auto" eller "text-align: center".<\/p>\n
Vi g\u00e5r igenom hur man centrerar en tabell i b\u00e5de moderna och \u00e4ldre webbl\u00e4sare s\u00e5 att den ser r\u00e4tt ut.<\/p>\n
Exemplen kommer att ha f\u00f6ljande allm\u00e4nna format:<\/p>\n
<div>\n\n<table>\n\n<\/table>\n\n<\/div><\/code><\/pre>\n
Stilar till\u00e4mpas p\u00e5 b\u00e5da<\/p>\n
,<\/p>\n
eller ibland b\u00e5da.<\/p>\n
Stilmallssektionen som vi ska leka med f\u00f6r att st\u00e4lla in marginalerna \u00e4r:<\/p>\n
.center1<\/code><\/pre>\n
Det h\u00e4r exemplet kommer att fungera bra p\u00e5 nyare webbl\u00e4sare. Det kommer ocks\u00e5 att fungera p\u00e5 de flesta \u00e4ldre webbl\u00e4sare. N\u00e4r du har anv\u00e4nt den h\u00e4r metoden \u00f6ppnar du den i olika webbl\u00e4sare f\u00f6r att kontrollera hur den ser ut.<\/p>\n
CSS f\u00f6r \u00e4ldre webbl\u00e4sare och nyare webbl\u00e4sare tillsammans:<\/p>\n
.centertbl<\/code><\/pre>\n
Hur fungerar det? Den f\u00f6rsta delen l\u00e4ggs in i<\/p>\n
. Detta kommer att centrera en tabell i Internet Explorer 5 och Netscape 4. Den andra delen appliceras p\u00e5<\/p>\n
inom en<\/p>\n
.<\/p>\n
Inst\u00e4llningarna f\u00f6r marginalerna l\u00e5ter dig centrera en tabell i webbl\u00e4sare som fungerar bra med CSS. Sedan kommer den infogade texten att \u00e5terst\u00e4llas till standardv\u00e4nsterjusteringen, och \u00e5sidos\u00e4tter den initiala "text-align: center" f\u00f6r \u00e4ldre webbl\u00e4sarst\u00f6d.<\/p>\n
Hur man centrerar med marginal<\/h3>\n
Ett av de vanligaste s\u00e4tten att centrera en tabell \u00e4r att st\u00e4lla in b\u00e5de den nedre och \u00f6vre marginalen till 0 och v\u00e4nster och h\u00f6ger marginal till auto.<\/p>\n
H\u00e4r \u00e4r en vanlig metod:<\/p>\n
table {<\/code><\/pre>\n
Eller s\u00e5 kan du g\u00f6ra s\u00e5 h\u00e4r:<\/p>\n
table {<\/code><\/pre>\n
Om du \u00e4r ute efter ett bord som har en exakt bredd, kan du g\u00f6ra det som du brukar och den automatiska marginalen delar upp utrymmet som blir \u00f6ver.<\/p>\n
table {<\/code><\/pre>\n
Ett annat s\u00e4tt att g\u00f6ra det \u00e4r att anv\u00e4nda procentsatser f\u00f6r att definiera bredden:<\/p>\n
table {<\/code><\/pre>\n
Celljustering: textjustering kontra vertikaljustering<\/h3>\n
Om du vill veta hur man centrerar text i CSS, finns det tv\u00e5 delar f\u00f6r att justera text i en cell; horisontellt och vertikalt. Horisontellt \u00e4r om texten kommer att justeras mitt, v\u00e4nster eller h\u00f6ger om den cellen. Detta styrs av egenskapen text-align.<\/p>\n
Vertikalt \u00e4r om det \u00e4r i mitten, toppen eller botten av cellen. Detta styrs av egenskapen vertikal-align.<\/p>\n
Du till\u00e4mpar egenskaperna nedan p\u00e5 TH- eller TD-elementet f\u00f6r att f\u00e5 din text vertikalt och horisontellt justerad som du vill. Till exempel:<\/p>\n
td {\ntext-align: center;\nvertical-align: top;\n}<\/code><\/pre>\n
\"Hur<\/a><\/p>\n
Att justera texten syftar p\u00e5 att l\u00e4gga till mellanslag mellan alla ord tills de passar perfekt till det tillg\u00e4ngliga utrymmet p\u00e5 raden. Den sista raden motiverar inte.<\/p>\n
Tips f\u00f6r bordsstyling<\/h3>\n
Innan vi avslutade t\u00e4nkte vi att det kan vara anv\u00e4ndbart att ha en lista med snabba tips som referens. Dessa kommer att hj\u00e4lpa n\u00e4r du g\u00f6r en tabell i CSS.<\/a><\/p>\n