HTML Jadual Menegak

Artikel berikut menyediakan garis besar untuk HTML Jadual Menegak. Dalam Jadual HTML, setiap rekod baharu dimasukkan sebagai baris dan lajur dalam Pangkalan Data. Baris dianggap sebagai Mendatar, dan Lajur adalah Menegak dalam DB. Jadual HTML benar-benar digunakan untuk membentangkan maklumat untuk rangka kerja seperti Bootstrap; kami dapat meningkatkan rupa dan rasa meja dengan mudah. Jadual digunakan untuk kebanyakan aplikasi seperti web, desktop atau aplikasi mudah alih; ia juga penting untuk menyediakan maklumat kepada pengguna akhir. Menggunakan rangka kerja bootstrap dan banyak ciri lain untuk menyampaikan fungsi penggayaan dan mengoptimumkan pembentangan untuk elemen berbeza seperti jadual.

Bagaimana untuk Mencipta Jadual Menegak dalam HTML?

Secara umumnya kami telah mencipta jadual dengan bantuan

,, menentukan baris, tag, malah kadangkala teg badan juga tidak digunakan, dan nilai masa itu berada di tengah-tengah jadi jika kandungan yang disekat di dalam sel jadual HTML luar akan dijajarkan secara automatik di tengah secara menegak dalam kawasan penyemak imbas web.

Menggunakan daripada sel jadual HTML menjadikan satu blok kandungan di dalamnya berpusat secara mendatar di kawasan pelayar web, jadual dalam ialah satu lagi jenis sel jadual HTML yang membentuk kotak dengan saiz yang diberikan, seperti yang kami nyatakan dalam imej contoh sebelumnya ialah dipaparkan dalam had, sesetengah penyemak imbas tidak akan menerima orientasi imej dalam halaman itu sendiri.

Jika kita menggunakan jadual dalam untuk HTML, ia adalah jadual di dalam sel jadual HTML luar. Ia mungkin tidak menetapkan ketinggian dan lebar jadual. Kemudian saiznya dilaraskan secara automatik untuk menampung kandungan, apa sahaja yang kita tetapkan dimensi. Jika lebar dan tingginya besar bermakna kawasan pelayar web akan dilihat secara automatik di tengah.

Dalam contoh di atas, kadangkala  ia akan menyerlahkan teg supaya ia tidak akan memaparkan imej dalam IE versi 3. Walaupun kami juga menetapkan keserasian penyemak imbas dalam jadual HTML.

Kesimpulan

Dalam jadual HTML, kami telah menyusun data dan kami tahu cara susun atur semantik untuk data jadual dalam HTML dan juga membuat inisiatif dengan Gaya CSS. Kami juga menggunakan fungsi bootstrap, perpustakaan Jquery menggunakan Javascript untuk menyerlahkan dan menukar susunan jadual. Jika kita perlu menggunakan pemalam Jquery, ia mempunyai banyak ciri lanjutan untuk jadual, seperti jika anda meletakkan kursor dalam sel jadual, ia akan menyerlahkan warna secara automatik. Begitu juga, jika kami menggunakan beberapa konsep lanjutan, ia mungkin mengubah format jadual dan menjajarkan data.

,

tag. Dalam

menentukan pengepala jadual,

ia menentukan nilai dalam HTML. Kami telah melihat beberapa contoh di bawah:

Contoh #1

Kod:

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>

Name:	Sivaraman
Mobile:	123456789

 Output:

Dalam contoh di atas, kita telah melihat dua tajuk ditunjukkan pada bahagian menegak; ia dipaparkan dalam format lajur. Ia merupakan salah satu contoh asas paparan data menegak dalam jadual HTML.

Contoh #2

Kod:

<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #c6c7cc;
padding: 10px 15px;
}
th {
font-weight: bold;
}
table.scroll {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead tr { display: block; }
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
table.scroll tbody td,
table.scroll thead th {
width: 140px;
border-right: 1px solid black;
}
table.scroll thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
thead tr th {
height: 30px;
line-height: 30px;
/*text-align: left;*/
}
tbody { border-top: 2px solid black; }
tbody td:last-child, thead th:last-child {
border-right: none !important;
}
</style>

ID	Name	Age
1	Siva	30
2	Raman	29
3	Sivaraman	31

Output:

Dalam contoh di atas, kami akan menggunakan pilihan tatal. Dalam pilihan tatal menegak lalai didayakan untuk data jadual. Kami juga mendayakan pilihan tatal mendatar jika diperlukan.

Contoh #3

Kod:

<style>
table { border-collapse: separate; line-height:25px; }
tr { display: block; float: left; width:200px;}
th,  td { display: block; }
</style>

Name

Number

Age

ID

 Output:

Dalam contoh di atas, kami telah menyerlahkan lajur menggunakan gaya warna latar belakang. Kami juga menggunakan warna latar depan juga untuk menyerlahkan bahagian seolah-olah diperlukan.

Jadual dalam bahagian yang berbeza

Kami juga telah menggunakan set pemformatan jadual yang berbeza dalam jadual HTML. Dalam contoh di atas, kami telah menggunakan asas untuk penjajaran jadual menegak; kami mempunyai set pemformatan yang berbeza untuk menyerlahkan jadual:

Sempadan dan Peraturan: Menggunakan Borders, ia akan menyerlahkan bingkai di sekeliling meja.

IT

Name	Age	Number
Sivaraman	30	8220244056
Raman	31	123456789

Kami telah melihat sempadan untuk contoh di atas; ia adalah sempadan yang diperintah; kami juga menggunakan beberapa sempadan lain seperti Garis putus-putus, dsb.

Bagaimana untuk Memusatkan Imej Secara Menegak dalam HTML?

Kami juga menjajarkan imej secara menegak untuk HTML; menggunakan gaya CSS, kami perlu menetapkan tetapan dalam teg gaya dan kami memaparkan imej dalam mod menegak.

Kod:

<center>
<table width="100%" height="100%" bgcolor="#a3ddc4">
<tr>
<td align="center">
<table width="800" height="500" bgcolor="#ff6f6f">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- For Internet Explorer 3-->
<center>

</center>
</center>

Output:

Contoh di atas menunjukkan imej berada dalam mod menegak; kami juga menukar orientasi jika perlu. Menggunakan ruang mod menegak akan dikurangkan, dan kandungan halaman yang lain ditunjukkan dalam satu halaman itu sendiri berbanding dengan mod mendatar. Jadual HTML luar menjadikan kawasan penyemak imbas web, kecuali untuk sempadan, jadual Html dan keseluruhan kawasan akan menjadi sel jadual HTML.

Sel jadual HTML luar dan dalam mewarisi nilai lalai untuk menjajarkan atribut daripada baris jadual induk dan anaknya. Ia juga membariskan nilai lalai untuk menggunakan atribut vaalign dalam jadual HTML luar menggunakan

Atas ialah kandungan terperinci HTML Jadual Menegak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!