Modo CSS per allineare orizzontalmente la tabella

StackOverflow https://stackoverflow.com/questions/301147

Domanda

Voglio mostrare una tabella di larghezza fissa al centro della finestra del browser. Ora uso 

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

Ma Visual Studio 2008 avvisa su questa riga:

L'attributo 'align' è considerato obsoleto. Si consiglia un costrutto più recente.

Quale stile CSS devo applicare alla tabella per ottenere lo stesso layout?

È stato utile?

Soluzione

Steven ha ragione, nella teoria :

  

& # 8220; corretto & # 8221; modo di centrare una tabella usando CSS. I browser conformi dovrebbero centrare le tabelle se i margini sinistro e destro sono uguali. Il modo più semplice per ottenere ciò è impostare i margini sinistro e destro su & # 8220; auto. & # 8221; Pertanto, si potrebbe scrivere in un foglio di stile: 

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

Ma l'articolo menzionato all'inizio di questa risposta ti offre tutto il resto del modo di centrare una tabella.

  

Un'elegante soluzione cross-browser CSS:   Funziona con MSIE 6 (Quirks e Standards), Mozilla, Opera e persino Netscape 4.x senza impostare alcuna larghezza esplicita: 

div.centered 
{
    text-align: center;
}

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


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

Altri suggerimenti

Prova questo: 

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

Semplice. IE6 e versioni successive centreranno felicemente il tuo tavolo con & Quot; margin: 0 auto; & Quot; se solo la pagina viene visualizzata tra " standard " modalità. A tal fine, è necessaria una dichiarazione doctype valida, ad esempio 

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

o 

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

È vero, IE5.5 e versioni successive rifiuteranno comunque di centrare la tabella, ma forse puoi conviverci, soprattutto se la pagina è ancora funzionante con la tabella allineata a sinistra. Penso che ormai gli utenti di IE5.5 e inferiori siano abbastanza abituati ad alcuni siti Web dall'aspetto strano - ma devi comunque assicurarti che quei problemi visivi non rendano il tuo sito inutilizzabile.

Buona codifica!

EDIT: Mi dispiace, forse dovrei sottolineare che non devi avere un " rigoroso " doctype per ottenere IE6 e fino a " standards " modalità di rendering. Mi sono reso conto che potrebbe sembrare così dagli esempi di doctype che ho postato sopra. Ad esempio, questa dichiarazione di tipo di documento funzionerà ovviamente allo stesso modo: 

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

Anche se potrebbe essere un'eresia nel mondo di oggi, in passato avresti fatto il seguente codice non css. Funziona su tutto, compresi i browser di oggi, ma - come ho già detto - è un'eresia nel mondo di oggi: 

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

Quello che ti serve è un modo per dire che vuoi centrare un tavolo e che la persona sta usando un browser più vecchio. Quindi inserire & Quot; & Lt; center & Gt; & Quot; comandi attorno al tavolo. Altrimenti, usa css.

Sorprendentemente - se vuoi centrare tutto nell'area BODY - puoi semplicemente usare lo standard 

text-align: center;

comando css e in IE8 (almeno) centrerà tutto sulla pagina comprese le tabelle. 

style="text-align:center;"

(penso)

o potresti semplicemente ignorarlo, funziona ancora

Questo dovrebbe funzionare: 

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

Sto solo imparando questo e quello che alla fine ha funzionato per me è stato prima di creare un tavolo con tre file. Impostare il margine per le righe sinistra e destra al 50%. Quindi inserire una riga singola, tabella a larghezza fissa all'interno del & Quot; tabella dati & Quot; del centro " riga della tabella " ;. 

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

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top