CSS sposób na wyrównanie tabeli w poziomie

Question 1

Chcę wyświetlić tabelę o stałej szerokości na środku okna przeglądarki. Teraz używam

<table width="200" align="center">

Ale program Visual Studio 2008 ostrzega w tym wierszu:

Atrybut „align” jest uważany za nieaktualny. Zalecana jest nowsza konstrukcja.

Jaki styl CSS powinienem zastosować do tabeli, aby uzyskać ten sam układ?

Question 2

Steven ma rację, w teorii :

„poprawny” sposób wyśrodkowania tabeli przy użyciu CSS. Zgodne przeglądarki powinny wyśrodkować tabele, jeśli lewy i prawy margines są równe. Najprostszym sposobem osiągnięcia tego jest ustawienie „automatycznego” dla lewego i prawego marginesu. Zatem można by napisać w arkuszu stylów:

table
{ 
    margin-left: auto;
    margin-right: auto;
}

Ale artykuł wspomniany na początku tej odpowiedzi zawiera wszystkie inne informacje na temat wyśrodkowania tabeli.

Eleganckie rozwiązanie CSS dla różnych przeglądarek: działa to zarówno w MSIE 6 (Quirks and Standards), jak iw Mozilli, Opera, a nawet w Netscape 4.x bez ustawiania żadnych wyraźnych szerokości:

div.centered 
{
    text-align: center;
}

div.centered table 
{
    margin: 0 auto; 
    text-align: left;
}


<div class="centered">
    <table>
    …
    </table>
</div>

Question 3

Spróbuj tego:

<table width="200" style="margin-left:auto;margin-right:auto">

Question 4

Prosty. Przeglądarka IE6 i nowsza z radością wyśrodkuje Twój stół z wartością „margin: 0 auto;” jeśli tylko strona renderuje się w trybie „standardowym”. Aby to się stało, potrzebujesz ważnej deklaracji typu dokumentu, takiej jak

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

lub

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

To prawda, IE 5.5 i starsze nadal odmawiają wyśrodkowania tabeli, ale być może możesz z tym żyć, zwłaszcza jeśli strona nadal działa, a tabela wyrównana do lewej. Myślę, że do tej pory użytkownicy IE5.5 i starsze są dość przyzwyczajeni do dziwnie wyglądających stron internetowych - ale nadal musisz upewnić się, że te wizualne usterki nie spowodują, że Twoja witryna będzie bezużyteczna.

Miłego kodowania!

EDYCJA: Przepraszamy, powinienem chyba zaznaczyć, że nie musisz mieć „ścisłego” typu dokumentu, aby uzyskać IE6 i przejść do trybu renderowania „standardów”. Uświadomiłem sobie, że może tak wydawać się na podstawie przykładów typów dokumentów, które zamieściłem powyżej. Na przykład ta deklaracja typu dokumentu będzie oczywiście działać równie dobrze:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Question 5

Chociaż w dzisiejszym świecie może to być herezja - w przeszłości należało wykonać następujący kod spoza CSS. Działa to we wszystkim, aż do dzisiejszych przeglądarek włącznie, ale - jak powiedziałem - jest to herezja w dzisiejszym świecie:

<center>
<table>
   ...
</table>
</center>

Potrzebujesz sposobu, aby stwierdzić, że chcesz wyśrodkować tabelę, a dana osoba korzysta ze starszej przeglądarki. Następnie wstaw polecenia „<center>” wokół tabeli. W przeciwnym razie - użyj css.

O dziwo - jeśli chcesz wyśrodkować wszystko w obszarze BODY - możesz po prostu skorzystać ze standardu

text-align: center;

css, aw IE8 (przynajmniej) wyśrodkuje wszystko na stronie, w tym tabele.

Question 6

style="text-align:center;"

(Myślę)

lub możesz to po prostu zignorować, nadal działa

Question 7

To powinno działać:

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>

Question 8

Właśnie się tego uczę i to, co w końcu zadziałało, to najpierw zrobić tabelę z trzema rzędami. Ustaw margines dla lewego i prawego wiersza na 50%. Następnie umieść pojedynczy wiersz tabeli o stałej szerokości wewnątrz „danych tabeli” środkowego „wiersza tabeli”.

Question 9

<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>

Question 10

Zasadniczo działa to tak,

<table align="center">
...

Ale możesz to zrobić w lepszy sposób za pomocą CSS i będzie to lepsze podejście do korzystania z CSS, ponieważ zapewnia dynamiczne zachowanie strony internetowej i jest responsywny.

  <table style="text-align:center;">

Ponadto, jeśli chcesz wyświetlić tylko tabelę na stronie, możesz przejść z wyrównaniem tagów treści, jak pokazano poniżej,

 <body style="text-align:center;">
<table>
  ...
</table>

Jeśli chcesz inne sugestie, daj mi znać. Na pewno ci w tym pomoże. Przy użyciu funkcji bootstrap byłoby to łatwiejsze i bardziej interaktywne.

Question 11

Dodaj do stylu DIV:

width: fit-content;

Answer 1

96

Chcę wyświetlić tabelę o stałej szerokości na środku okna przeglądarki. Teraz używam

<table width="200" align="center">

Ale program Visual Studio 2008 ostrzega w tym wierszu:

Atrybut „align” jest uważany za nieaktualny. Zalecana jest nowsza konstrukcja.

Jaki styl CSS powinienem zastosować do tabeli, aby uzyskać ten sam układ?

html css alignment css-tables Alexander Prokofyev
źródło

2

Więc jakie rozwiązanie ostatecznie wybrałeś?

Ola Tuvesson

Answer 2

2

Więc jakie rozwiązanie ostatecznie wybrałeś?

Ola Tuvesson

Answer 3

Steven ma rację, w teorii :

„poprawny” sposób wyśrodkowania tabeli przy użyciu CSS. Zgodne przeglądarki powinny wyśrodkować tabele, jeśli lewy i prawy margines są równe. Najprostszym sposobem osiągnięcia tego jest ustawienie „automatycznego” dla lewego i prawego marginesu. Zatem można by napisać w arkuszu stylów:

table
{ 
    margin-left: auto;
    margin-right: auto;
}

Ale artykuł wspomniany na początku tej odpowiedzi zawiera wszystkie inne informacje na temat wyśrodkowania tabeli.

Eleganckie rozwiązanie CSS dla różnych przeglądarek: działa to zarówno w MSIE 6 (Quirks and Standards), jak iw Mozilli, Opera, a nawet w Netscape 4.x bez ustawiania żadnych wyraźnych szerokości:

div.centered 
{
    text-align: center;
}

div.centered table 
{
    margin: 0 auto; 
    text-align: left;
}


<div class="centered">
    <table>
    …
    </table>
</div>

Answer 4

Możesz ustawić stół na środku z marginesami: 0 auto; w IE6 i nowszych, jeśli upewnisz się, że Twoja strona ma prawidłową deklarację typu dokumentu.

Ola Tuvesson

Answer 5

@Marco: Nie mam w tej chwili tych informacji, ale może to być dobra podstawa do pytania na StackOverflow.

VonC

Answer 6

1

masz całkowitą rację. TABELA nie musi określać szerokości, aby uzyskać wyśrodkowanie w poziomie. Przetestowałem to. Podczas gdy DIV wymaga określenia szerokości, aby uzyskać centrowanie w poziomie.

Marco Demaio

Answer 7

17

Spróbuj tego:

<table width="200" style="margin-left:auto;margin-right:auto">

jalbert
źródło

Answer 8

Prosty. Przeglądarka IE6 i nowsza z radością wyśrodkuje Twój stół z wartością „margin: 0 auto;” jeśli tylko strona renderuje się w trybie „standardowym”. Aby to się stało, potrzebujesz ważnej deklaracji typu dokumentu, takiej jak

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

lub

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

To prawda, IE 5.5 i starsze nadal odmawiają wyśrodkowania tabeli, ale być może możesz z tym żyć, zwłaszcza jeśli strona nadal działa, a tabela wyrównana do lewej. Myślę, że do tej pory użytkownicy IE5.5 i starsze są dość przyzwyczajeni do dziwnie wyglądających stron internetowych - ale nadal musisz upewnić się, że te wizualne usterki nie spowodują, że Twoja witryna będzie bezużyteczna.

Miłego kodowania!

EDYCJA: Przepraszamy, powinienem chyba zaznaczyć, że nie musisz mieć „ścisłego” typu dokumentu, aby uzyskać IE6 i przejść do trybu renderowania „standardów”. Uświadomiłem sobie, że może tak wydawać się na podstawie przykładów typów dokumentów, które zamieściłem powyżej. Na przykład ta deklaracja typu dokumentu będzie oczywiście działać równie dobrze:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Answer 9

Chociaż w dzisiejszym świecie może to być herezja - w przeszłości należało wykonać następujący kod spoza CSS. Działa to we wszystkim, aż do dzisiejszych przeglądarek włącznie, ale - jak powiedziałem - jest to herezja w dzisiejszym świecie:

<center>
<table>
   ...
</table>
</center>

Potrzebujesz sposobu, aby stwierdzić, że chcesz wyśrodkować tabelę, a dana osoba korzysta ze starszej przeglądarki. Następnie wstaw polecenia „<center>” wokół tabeli. W przeciwnym razie - użyj css.

O dziwo - jeśli chcesz wyśrodkować wszystko w obszarze BODY - możesz po prostu skorzystać ze standardu

text-align: center;

css, aw IE8 (przynajmniej) wyśrodkuje wszystko na stronie, w tym tabele.

Answer 10

0

style="text-align:center;"

(Myślę)

lub możesz to po prostu zignorować, nadal działa

Steven A. Lowe
źródło

Answer 11

0

To powinno działać:

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>

Matt Howell
źródło

Answer 12

Właśnie się tego uczę i to, co w końcu zadziałało, to najpierw zrobić tabelę z trzema rzędami. Ustaw margines dla lewego i prawego wiersza na 50%. Następnie umieść pojedynczy wiersz tabeli o stałej szerokości wewnątrz „danych tabeli” środkowego „wiersza tabeli”.

Answer 13

0

<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>

Chandra Shekhar Sharma
źródło

Answer 14

Zasadniczo działa to tak,

<table align="center">
...

Ale możesz to zrobić w lepszy sposób za pomocą CSS i będzie to lepsze podejście do korzystania z CSS, ponieważ zapewnia dynamiczne zachowanie strony internetowej i jest responsywny.

  <table style="text-align:center;">

Ponadto, jeśli chcesz wyświetlić tylko tabelę na stronie, możesz przejść z wyrównaniem tagów treści, jak pokazano poniżej,

 <body style="text-align:center;">
<table>
  ...
</table>

Jeśli chcesz inne sugestie, daj mi znać. Na pewno ci w tym pomoże. Przy użyciu funkcji bootstrap byłoby to łatwiejsze i bardziej interaktywne.

Answer 15

0

Dodaj do stylu DIV:

width: fit-content;

Khaled Mohab
źródło

CSS sposób na wyrównanie tabeli w poziomie

Odpowiedzi: