HTML 表格是 Web 開發的關鍵元素。它們用於以結構化格式組織和顯示資料。 HTML 表格可讓 Web 開發人員將資料排列到儲存格的行和列中。
HTML表格是使用
| 和 | 。每個組件都有其獨特的屬性。
了解 HTML 表格中的
文法以下是在HTML中設定 寬度的語法。
| <td style="width: 20px; >content</td> 登入後複製 這段程式碼將把 元素的寬度設定為20px。
| 設定當表格顯示在網頁上時，表格看起來一致且易於閱讀，這一點很重要。我們可以透過為表中的 為 以下是為 HTML 表格中的 1。使用寬度屬性HTML的style元素包含一個width屬性。為了設定單元格寬度，我們可以在 <td width="100px">Data</td> 登入後複製 範例 1這裡有一個範例，使用width屬性來設定 <!DOCTYPE html>
<html>
<body>
<h3>Set the width of <td> element using the width attribute </h2>
<table border = "1px">
<tr>
<td width="100px">Content 1</td>
<td width="150px">Content 2</td>
</tr>
<tr>
<td>Content 3</td>
<td>Content 4</td>
</tr>
<tr>
<td>Content 5</td>
<td>Content 6</td>
</tr>
</table>
</body>
</html>
登入後複製 2. 使用CSS透過使用CSS，我們可以為 td {
width: 100px;
}
登入後複製 此程式碼會將 範例 2這裡是一個使用 CSS 設定 <!DOCTYPE html>
<html>
<head>
<style>
td {
width: 100px;
}
</style>
</head>
<body>
<h3>Set the width of <td> element using CSS</h3>
<table border = "1px">
<tr>
<td>Content 1</td>
<td>Content 2</td>
</tr>
<tr>
<td>Content 3</td>
<td>Content 4</td>
</tr>
<tr>
<td>Content 5</td>
<td>Content 6</td>
</tr>
</table>
</body>
</html>
登入後複製 3. 使用table-layout屬性我們也可以使用 table-layout 屬性為 table {
table-layout: fixed;
}
td {
width: 150px;
}
登入後複製 這段程式碼將把 Example 3的中文翻譯為：範例3#這是一個使用table-layout屬性來設定 <!DOCTYPE html>
<html>
<head>
<style>
h1, h3 {
text-align: center;
}
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
border: 1px solid;
}
td {
width: 150px;
}
</style>
</head>
<body>
<h3>Fixed <td> Width using the table-layout Property</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ram Kumar</td>
<td>35</td>
<td>Male</td>
</tr>
<tr>
<td>Kavita</td>
<td>28</td>
<td>Female</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>42</td>
<td>Male</td>
</tr>
</tbody>
</table>
</body>
</html>
登入後複製 結論在本文中，我們討論了幾種設定固定寬度的方法，例如 width 屬性、CSS 和 table-layout 屬性。在 HTML 表格中為 |
|---|
以上是如何在表格中為td設定固定寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
