首頁 >web前端 >html教學 >如何讓我的HTML表格不會格式錯誤？

如何讓我的HTML表格不會格式錯誤？

WBOY轉載: 2023-08-19 21:21:241180瀏覽

如何讓我的HTML表格不會格式錯誤？

有一個很好支持但鮮為人知的、極其有用的CSS屬性適用於表格。它改變了表格的顯示方式，使您可以擁有更可靠、一致的佈局。將表格製作成適當的格式是有益的，因為它使網頁更加用戶友好，有助於用戶更清晰地理解表格中的信息。

本文將教你如何在HTML中防止表格格式化「錯誤」。在我們深入閱讀本文之前，讓我們先快速了解一下HTML中的表格。

HTML表格

HTML表格是使用

標籤建立的，其中標籤用於建立表格行，而

標籤用於建立資料儲存格。

下的元素預設為普通文字且左對齊。

HTML表格允許網頁作者將文字、圖像、連結、其他表格等資料按行和列的儲存格排列。

Syntax

以下是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://www.tutorialspoint.com/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繪製在網頁上的表格。

以上是如何讓我的HTML表格不會格式錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html table td tr

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何傳回一個表示等效日期物件來源的字串？下一篇：如何傳回一個表示等效日期物件來源的字串？

看更多