CSS sposób na poziome wyrównanie tabeli

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

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

Ale Visual Studio 2008 daje ostrzeżenie w tej linii:

atrybut 'align' jest uważany za Nieaktualny. Zalecana jest nowsza konstrukcja.

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

Author: Brian Tompsett - 汤莱恩, 2008-11-19
Source

8 answers

Steven ma rację, w teoria :

"poprawny" sposób wyśrodkowania tabeli za pomocą CSS. Zgodne przeglądarki powinny wyśrodkować tabele, jeśli lewy i prawy margines są równe. Najprostszym sposobem na to jest ustawienie lewego i prawego marginesu na " auto."Można więc napisać w arkuszu stylów: 

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

Ale artykuł wspomniany na początku tej odpowiedzi daje zupełnie inny sposób na wyśrodkowanie tabeli.

Elegancka przeglądarka css rozwiązanie: Działa to zarówno w MSIE 6( dziwactwa i standardy), Mozilla, Opera, a nawet Netscape 4.x bez ustawiania jakichkolwiek jawnych szerokości: 

div.centered 
{
    text-align: center;
}

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


<div class="centered">
    <table>
    …
    </table>
</div>
 177
Author: VonC,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-20 14:23:17

Spróbuj tego: 

<table width="200" style="margin-left:auto;margin-right:auto">
 13
Author: jalbert,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-19 06:27:44

Proste. IE6 i wyżej z radością wyśrodkuje Twoją tabelę z "margin: 0 auto;", jeśli tylko strona zostanie wyświetlona w trybie "standardy". Aby tak się stało, potrzebujesz poprawnej deklaracji doctype, 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">

Prawda, IE5. 5 i poniżej nadal odmawiają wyśrodkowania tabeli, ale być może możesz z tym żyć, zwłaszcza jeśli strona jest nadal funkcjonalna z tabelą wyrównaną do lewej. Myślę, że do tej pory użytkownicy IE5. 5 i poniżej są dość przyzwyczajeni do niektórych dziwnie wyglądających stron internetowych - ale ty nadal musisz upewnić się, że te usterki wizualne nie czynią Twojej witryny bezużyteczną.

Szczęśliwego kodowania!

EDIT: Przepraszam, powinienem chyba zwrócić uwagę, że nie musisz mieć "ścisłego" doctype, aby uzyskać IE6 i przejść do" standards " tryb renderowania. Zdałem sobie sprawę, że może się tak wydawać z przykładów doctype, które zamieściłem powyżej. Na przykład, deklaracja doctype będzie oczywiście działać równie: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2
Author: Ola Tuvesson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-20 14:21:00

Chociaż w dzisiejszym świecie może to być herezja - w przeszłości wykonywałbyś następujący kod bez css. Działa to we wszystkim, aż do dzisiejszych przeglądarek włącznie, ale - jak już powiedziałem - jest to herezja w dzisiejszym świecie: {]} 

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

To, czego potrzebujesz, to jakiś sposób, aby powiedzieć, że chcesz wyśrodkować tabelę, a osoba korzysta ze starszej przeglądarki. Następnie wstaw polecenia " " wokół tabeli. W przeciwnym razie-użyj css.

Zaskakująco - jeśli chcesz wyśrodkować wszystko w ciele area - wystarczy użyć standard 

text-align: center;

Polecenie Css i w IE8 (przynajmniej) wyśrodkuje wszystko na stronie łącznie z tabelami.

 2
Author: Mark Manning,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-22 20:39:57 
style="text-align:center;"

(Chyba)

Albo możesz to zignorować, to nadal działa

 0
Author: Steven A. Lowe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-19 06:22:08

To powinno zadziałać: 

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>
 0
Author: Matt Howell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-19 06:30:21

Dopiero się tego uczę i w końcu udało mi się stworzyć 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" centrum "wiersz tabeli".

 0
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-10-02 02:36:49 
<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
 0
Author: Chandra Shekhar Sharma,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-19 09:50:24