Modo CSS per allineare orizzontalmente la tabella

Question 1

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

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

Ma Visual Studio 2008 fornisce un avviso 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?

Question 2

Steven ha ragione, in teoria :

il modo "corretto" per centrare una tabella utilizzando i CSS. I browser conformi dovrebbero centrare le tabelle se i margini sinistro e destro sono uguali. Il modo più semplice per farlo è impostare i margini sinistro e destro su "auto". Quindi, 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 tutti gli altri modi per centrare un tavolo.

Un'elegante soluzione cross-browser CSS: funziona sia con MSIE 6 (Quirks and 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>

Question 3

Prova questo:

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

Question 4

Semplice. IE6 e versioni successive centreranno felicemente la tua tabella con "margin: 0 auto;" se solo la pagina viene visualizzata in modalità "standard". Per far sì che ciò accada, è necessaria una dichiarazione di doctype valida, come

<!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 precedenti si rifiuteranno ancora 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 versioni precedenti siano abbastanza abituati ad alcuni siti Web dall'aspetto strano, ma devi comunque assicurarti che quei difetti visivi non rendano il tuo sito inutilizzabile.

Buona programmazione!

EDIT: Mi dispiace, forse dovrei sottolineare che non è necessario disporre di un doctype "rigoroso" per ottenere IE6 e in modalità di rendering "standard". Mi sono reso conto che potrebbe sembrare così dagli esempi di doctype che ho pubblicato sopra. Ad esempio, questa dichiarazione di doctype 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">

Question 5

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

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

Quello di cui hai bisogno è un modo per dire che vuoi centrare una tabella e la persona sta usando un browser meno recente. Quindi inserire i comandi "<center>" intorno al tavolo. Altrimenti, usa css.

Sorprendentemente, se vuoi centrare tutto nell'area CORPO, puoi semplicemente usare lo standard

text-align: center;

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

Question 6

style="text-align:center;"

(penso)

o potresti semplicemente ignorarlo, funziona ancora

Question 7

Questo dovrebbe funzionare:

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

Question 8

Sto solo imparando questo e quello che alla fine ha funzionato per me è stato creare prima una tabella con tre righe. Imposta il margine per le righe sinistra e destra al 50%. Quindi inserire una singola riga, tabella a larghezza fissa all'interno dei "dati della tabella" della "riga della tabella" centrale.

Question 9

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

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

Question 10

Fondamentalmente, funziona come

<table align="center">
...

Ma puoi farlo in modo migliore usando CSS, e questo sarà un approccio migliore per usare CSS poiché fornisce un comportamento dinamico a una pagina web ed è reattivo.

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

Inoltre, se è necessario visualizzare solo la tabella su una pagina, è possibile eseguire l'allineamento del tag del corpo solo come mostrato di seguito,

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

Se vuoi altri suggerimenti per favore fatemelo sapere. Ti aiuterà sicuramente in questo. Anche usando le funzionalità di bootstrap questo sarebbe più facile e interattivo.

Question 11

Aggiungi allo stile div:

width: fit-content;