Rumah > Artikel > hujung hadapan web > HTML Jadual Menegak
HTML Jadual Menegak
- 王林asal
- 2024-09-04 16:45:201038semak imbas
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
| , | tag. Dalam |
|---|---|
| menentukan pengepala jadual, | ia menentukan nilai dalam HTML. Kami telah melihat beberapa contoh di bawah:
Contoh #1Kod: <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:75%">
<tr>
<th>Name:</th>
<td>Sivaraman</td>
</tr>
<tr>
<th>Mobile:</th>
<td>123456789</td>
</tr>
<tr>
</table>
</body>
</html>
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 #2Kod: <html>
<head>
<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>
</head>
<table class="scroll">
<thead>
<tr>
<th scope="col" colspan="1">ID</th>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Siva</td>
<td>30</td>
</tr>
<tr>
<td>2</td>
<td>Raman</td>
<td>29</td>
</tr>
<tr>
<td>3</td>
<td>Sivaraman</td>
<td>31</td>
</tr>
</tbody>
</table>
</html>
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 #3Kod: <style>
table { border-collapse: separate; line-height:25px; }
tr { display: block; float: left; width:200px;}
th, td { display: block; }
</style>
<form >
<table border="1" class="variant-table" >
<tr>
<td style="background-color: #53B3AE;">Name</td>
<td style="background-color: #53B3AE;">Number</td>
<td style="background-color: #53B3AE;">Age</td>
<td style="background-color: #53B3AE;">ID</td>
</tr>
</table>
</form>
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 berbezaKami 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. <TABLE border="1" summary="Welcome to My Domain."> <CAPTION>IT</CAPTION> <TR> <TH>Name</TH> <TH>Age</TH> <TH>Number</TH> <TR> <TD>Sivaraman</TD> <TD>30</TD> <TD>8220244056</TD> <TR> <TD>Raman</TD> <TD>31</TD> <TD>123456789</TD> </TABLE>
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: <html> <body bgcolor="#ffffff"> <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> </body> </html> 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 |
