資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 HTML 中防止表格格式“錯誤”？
表格有一個鮮為人知但非常有用的 CSS 屬性，它可以改變表格的顯示方式，從而使您可以獲得更可靠、更一致的佈局。以正確的格式建立表格是有益的，因為它使網頁更友好，並幫助使用者更清楚地理解表格中的資訊。
本文將教你如何防止 HTML 中的表格格式“錯誤”。在深入瞭解本文之前，讓我們快速瀏覽一下 HTML 中的表格。
HTML 表格
HTML 表格使用 <table> 標籤建立，其中 <tr> 標籤用於建立表格行，<td> 標籤用於建立資料單元格。<td> 下的元素預設為常規左對齊。
HTML 表格允許網頁作者將資料（如文字、影像、連結、其他表格等）排列成行和列的單元格。
語法
以下是 HTML 表格的語法
<table>…</table>
請考慮以下示例，以更好地瞭解如何避免“錯誤”的 HTML 表格格式。
示例
在以下示例中，我們結合使用 CSS 和前面提到的表格高度來避免“錯誤”的表格格式。
<!DOCTYPE html>
<html>
<body>
<style>
table, td {
width: 100%;
border: 2px solid #82E0AA ;
border-collapse: collapse;
}
td {
height: 52px;
width: 52%;
}
td[rowspan="2"] {
height: 110px;
}
</style>
<table>
<tbody>
<tr>
<td colspan="2">1.MSD</td>
</tr>
<tr>
<td rowspan="2">2.VIRAT</td>
<td>3.YUVI</td>
</tr>
</tbody>
</table>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含一個表格，並在網頁上以正確的格式顯示填充的資料。
示例
考慮以下示例，我們希望將影像作為表格的背景影像，我們將藉助 CSS 新增此影像以避免表格格式“錯誤”。
<!DOCTYPE html>
<html>
<body>
<table border = "2" bordercolor = "#BB8FCE" background = "https://tutorialspoint.tw/images/asp.net_mvc_icon.svg">
<tr>
<th>Stream</th>
<th>Course</th>
<th>Amount</th>
</tr>
<tr>
<td rowspan = "2">Technical</td>
<td>HTML</td><td>6000</td>
</tr>
<tr>
<td>JAVA</td>
</tr>
</table>
</body>
</html>
執行上述程式碼後，將彈出輸出視窗，顯示錶格以及作為表格背景新增的影像，並顯示在網頁上。
示例
讓我們看看以下示例，我們使用表格高度和寬度建立所需的格式表格，以避免“錯誤”的表格格式。
<!DOCTYPE html>
<html>
<body>
<table border = "2" bordercolor="#CCCCFF" width = "300" height = "100">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含一個表格，並應用 CSS 並顯示在網頁上。
更新於：2023年4月20日
128 次檢視
廣告