Cara CSS untuk meratakan tabel secara horizontal

96

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?

html css alignment css-tables Alexander Prokofyev
sumber
2
Jadi, solusi apa yang Anda pilih pada akhirnya?
Ola Tuvesson

Jawaban:

183

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>
VonC
sumber
Anda bisa mendapatkan tabel ke tengah dengan margin: 0 auto; di IE6 dan yang lebih baru jika Anda memastikan halaman Anda memiliki deklarasi doctype yang valid.
Ola Tuvesson
@Marco: Saat ini saya belum memiliki informasi ini, tetapi itu mungkin dasar yang baik untuk pertanyaan tentang StackOverflow.
VonC
1
Anda benar sekali. TABEL tidak perlu menentukan lebar untuk ditengahkan secara horizontal. Saya mengujinya. Sementara DIV memang membutuhkan lebar yang akan ditentukan untuk mendapatkan pemusatan horizontal.
Marco Demaio
17

Coba ini:

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

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">
Ola Tuvesson
sumber
2

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.

Mark Manning
sumber
0 
style="text-align:center;"

(kupikir)

atau Anda bisa mengabaikannya, itu masih berfungsi

Steven A. Lowe
sumber
0

Ini harus bekerja:

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

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.


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

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
Chandra Shekhar Sharma
sumber
0

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.

Gourav Goutam
sumber
0

Tambahkan ke gaya div:

width: fit-content;
Khaled Mohab
sumber