Pokud jste začínající webový designér, můžete mít otázky, jak vycentrovat text uvnitř buňky tabulky. V této příručce se naučíte tuto techniku za pár minut. Je to snadné - i když jste to nikdy předtím nezkusili.
Začínáme
Centrování textu uvnitř buňky se nejlépe provádí pomocí CSS, stejně jako byste text vycentrovali do jiného prvku na své webové stránce. Než však začnete, musíte se rozhodnout, na co přesně se chcete soustředit. U tabulky máte několik možností, včetně každé buňky v tabulce; každá buňka záhlaví v tabulce každá buňka v hlavě, těle tabulky nebo patce tabulky. Můžete také vycentrovat konkrétní buňku nebo sadu buněk v tabulce.
Kromě toho byste měli vytvořit vnitřní styl v záhlaví dokumentu nebo připojený k dokumentu jako externí styl. Styly umístíte do středu buněk tabulky v této šabloně stylů.
Jak vycentrovat každou buňku v tabulce
Přidejte následující řádky do šablony stylů:
td, th {
zarovnání textu: na střed;
}
Jak vycentrovat každou buňku záhlaví v tabulce
Přidejte následující řádky do šablony stylů:
th {
zarovnání textu: na střed;
}
Centrování každé buňky v hlavě, těle nebo noze stolu
Chcete-li vycentrovat tyto buňky, musíte přidat značky tabulky, které se ne vždy používají, například.
thead th, thead td {
zarovnání textu: na střed;
}
tbody th, tbody td {
zarovnání textu: na střed;
}
tfoot th, tfoot td {
zarovnání textu: na střed;
}
Odeberte styly pro oblasti, které nechcete vycentrovat.
Jak vycentrovat konkrétní buňku nebo buňky v tabulce
Chcete-li to provést, musíte nastavit třídu na buňky, které chcete vycentrovat.
Přidejte následující atribut do buněk tabulky, které chcete vycentrovat:
Potom přidejte do šablony stylů následující:
.centrovaná buňka {
zarovnání textu: na střed;
}
Tuto třídu můžete přidat do libovolné buňky v tabulce.
Balení
Neváhejte použít tyto styly na kterékoli ze svých buněk tabulky. Můžete je použít na sloučené buňky nebo na jednotlivé buňky a text uvnitř bude vystředěn.