Labākais veids, kā centrēt tekstu tabulas šūnā

click fraud protection

Ja esat iesācēju tīmekļa dizainers, jums var būt jautājumi par to, kā tekstu centrēt tabulas šūnas iekšpusē. Izmantojot šo rokasgrāmatu, iemācieties šo tehniku ​​tikai dažu minūšu laikā. Tas ir viegli - pat ja nekad iepriekš to neesat mēģinājis.

Darba sākšana

Centrēšanas teksts šūnas iekšpusi vislabāk var izdarīt ar CSS, tāpat kā tekstu centrētu citā tīmekļa lapas elementā. Pirms sākat, jums tomēr jāizlemj, ko tieši vēlaties koncentrēt. Izmantojot tabulu, jums ir vairākas iespējas, ieskaitot katru tabulas šūnu; katra tabulas galvenes šūna, katra tabulas galvas, galda vai galda pamatnes šūna. Tabulā varat arī centrēt noteiktu šūnu vai šūnu kopu.

Turklāt jums vajadzētu izveidot iekšējā stila lapa dokumenta galvā vai pievienots dokumentam kā ārējā stila lapa. Jūs ievietosiet stilus tā, lai tabulas šūnas būtu centrētas šajā stila lapā.

Kā centrēt katru tabulas šūnu

Pievienojiet stila lapai šādas rindas:

td, th {
text-align: center;
}

Kā centrēt katru galvenes šūnu tabulā

Pievienojiet stila lapai šādas rindas:

instagram viewer
th {
text-align: center;
}

Katras šūnas centrēšana galda galvai, ķermenim vai pēdai

Lai centrētu šīs šūnas, jāpievieno tabulas tagi, kas ne vienmēr tiek izmantoti, piemēram,.

thead th, thead td {
text-align: center;
}
tbody th, tbody td {
text-align: center;
}
tfoot th, tfoot td {
text-align: center;
}

Noņemiet stilu apgabaliem, kurus nevēlaties centrēt.

Kā centrēt tabulā noteiktu šūnu vai šūnas

Lai to izdarītu, šūnās, kuras vēlaties centrēt, ir jāiestata klase.

Pievienojiet šādu atribūtu tabulas šūnām, kuras vēlaties centrēt:

Pēc tam stila lapai pievienojiet:

.centered-cell {
text-align: center;
}

Šo klasi varat pievienot jebkurai tabulas šūnai.

Iesaiņošana

Nevilcinieties izmantot šos stilus jebkurā tabulas šūnā. Varat tos izmantot apvienotajās šūnās vai atsevišķās šūnās, un teksts tajā tiks centrēts.

instagram story viewer