Cara CSS untuk meratakan tabel secara horizontal

Question 1

Saya ingin menunjukkan tabel dengan lebar tetap di tengah jendela browser. Sekarang saya gunakan

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

Tapi Visual Studio 2008 memberikan peringatan pada baris ini:

Atribut 'align' dianggap sudah ketinggalan zaman. Konstruksi yang lebih baru direkomendasikan.

Gaya CSS apa yang harus saya terapkan pada tabel untuk mendapatkan tata letak yang sama?

Question 2

Steven benar, secara teori :

cara yang "benar" untuk memusatkan tabel menggunakan CSS. Browser yang sesuai harus memusatkan tabel jika margin kiri dan kanan sama. Cara termudah untuk melakukannya adalah dengan menyetel margin kiri dan kanan ke "otomatis". Jadi, seseorang dapat menulis dalam style sheet:

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

Tapi artikel yang disebutkan di awal jawaban ini memberi Anda cara lain untuk memusatkan tabel.

Solusi lintas-browser css yang elegan: Ini berfungsi baik di MSIE 6 (Quirks dan Standards), Mozilla, Opera, dan bahkan Netscape 4.x tanpa menyetel lebar eksplisit apa pun:

div.centered 
{
    text-align: center;
}

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


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

Question 3

Coba ini:

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

Question 4

Sederhana. IE6 dan yang lebih baru akan dengan senang hati memusatkan tabel Anda dengan "margin: 0 auto;" jika hanya halaman yang dirender dalam mode "standar". Untuk mewujudkannya, Anda memerlukan deklarasi doctype yang valid, seperti

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

atau

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

Benar, IE5.5 dan di bawahnya masih akan menolak untuk menengahkan tabel tetapi mungkin Anda bisa menerimanya, terutama jika halaman masih berfungsi dengan tabel rata kiri. Saya pikir sekarang pengguna IE5.5 dan di bawahnya cukup terbiasa dengan beberapa situs web yang tampak aneh - tetapi Anda masih perlu memastikan bahwa gangguan visual tersebut tidak membuat situs Anda tidak dapat digunakan.

Selamat membuat kode!

EDIT: Maaf, saya mungkin harus menunjukkan bahwa Anda tidak harus memiliki doctype "ketat" untuk mendapatkan IE6 dan naik ke mode rendering "standar". Saya menyadari itu mungkin tampak seperti itu dari contoh doctype yang saya posting di atas. Misalnya, deklarasi doctype ini tentu saja akan bekerja sama:

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

Question 5

Meskipun mungkin bid'ah di dunia saat ini - di masa lalu Anda akan melakukan kode non-css berikut. Ini berfungsi dalam segala hal hingga dan termasuk browser saat ini tetapi - seperti yang telah saya katakan - ini adalah bid'ah di dunia saat ini:

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

Yang Anda butuhkan adalah beberapa cara untuk memberi tahu bahwa Anda ingin memusatkan meja dan orang tersebut menggunakan browser yang lebih lama. Kemudian masukkan perintah "<center>" di sekitar tabel. Jika tidak - gunakan css.

Anehnya - jika Anda ingin memusatkan segalanya di area BODY - Anda bisa menggunakan standar

text-align: center;

css dan di IE8 (setidaknya) itu akan memusatkan segalanya di halaman termasuk tabel.

Question 6

style="text-align:center;"

(kupikir)

atau Anda bisa mengabaikannya, itu masih berfungsi

Question 7

Ini harus bekerja:

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

Question 8

Saya baru saja mempelajari ini dan yang akhirnya berhasil bagi saya adalah membuat tabel dengan tiga baris. Atur margin untuk baris kiri dan kanan menjadi 50%. Kemudian letakkan satu baris, tabel lebar tetap di dalam "data tabel" dari "baris tabel" tengah.

Question 9

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

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

Question 10

Pada dasarnya, ini berfungsi seperti,

<table align="center">
...

Namun, Anda dapat melakukannya dengan cara yang lebih baik menggunakan CSS, dan ini akan menjadi pendekatan yang lebih baik untuk menggunakan CSS karena memberikan perilaku dinamis ke halaman web dan responsif.

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

Juga, jika Anda hanya perlu menampilkan tabel pada halaman maka Anda dapat menggunakan penjajaran tag tubuh saja seperti yang ditunjukkan di bawah ini,

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

Jika Anda ingin saran lain, beri tahu saya. Pasti akan membantu Anda dalam hal ini. Juga menggunakan fitur bootstrap ini akan lebih mudah dan interaktif.

Question 11

Tambahkan ke gaya div:

width: fit-content;