HTML｜CSS控制表格和列表自動隱藏超出內容

控制表格自動隱藏超出內容

table{
table-layout:fixed;//布局方式要固定
width:65%;
border-collapse:collapse;
}
td{
white-space:nowrap;//不允許文本換行
overflow:hidden; //超部分自動隱藏
text-overflow:ellipsis; //超出部分以省略號顯示
border:black solid 1px;
}

2 控制列表自動隱藏超出內容

li{
display:block;
float:left;
width:33.3%;
white-space:nowrap;
overflow:hidden;
/*如果要交超出內容以...顯示，則需要增加屬性定義：*/
text-overflow:ellipsis;
}

表格和列表的最終效果如下：

-End-

篇文章介紹了div標簽的作用，我們這篇文章主要來看下過氣表格標簽table的語法與使用。

1）table的曾經

在div沒有出現之前，table曾是做網頁的中堅力量。記得在開始學網頁的時候，div是神馬，我不造呀！做網頁還用div嗎，就只用table就可以了，各種表格嵌套加嵌套，一個網頁就拼湊出來了。但table寫的布局頁面做維護就比較令人頭痛欲裂了。因為table是一層一層嵌套，標簽量冗余過多。所以修改起來就是動一發而牽全身。維護起來格外麻煩，往往是拆東墻補西墻。所以它后來就慢慢被div所替代。但是在數據列表上還是用table形式來寫比較的合理，所以現在table多用于網站后臺的表格數據處理中。

2）表格標簽table使用

簡單的表格由table元素以及一個或多個tr（行標簽）、th（表頭單元格標簽）、td（普通單元格標簽）等標簽所組成，當然復雜的表格還包括caption（表格標題）、col(定義列)、colgroup(對表格中的列進行組合)、thead（組合表頭的內容）tbody(組合表格的主題內容)、tfoot(組合表格的腳注內容)等這里我們先簡單了解下即可。

定義表格：<table></table>

創建表行：<tr></tr>

創建列(單元格):<th></th>（表頭）、<td></td>（表格單元）

注意：默認情況下，每行中的列數是統一的。

比如我們想創建一個姓名、年齡、分數和日期的數據表格，并設置border為1，我們可以使用table來制作。具體的表格代碼如下圖所示：

在網頁中呈現的效果就如下圖所示：

3）為表格添加簡單樣式

這時候有的人就會說了，為什么這個表格看起來這么奇怪，邊框都是有空隙的呢？我們只需要給表格添加一些特殊的樣式，即可制作一個比較漂亮好看的表格了。添加的樣式代碼：

在網頁中呈現的效果就如下圖所示：

現在我們的表格是不是看著比較的清新了，上面的css代碼中為表格添加了背景、邊框以及去掉了粗的邊線。具體的css代碼我們會在以后的課程中為大家介紹，大家在這里只需要知道并了解table標簽的作用以及使用就可以了。沒事可以多用table寫一寫表格，熟能生巧。

附贈一句經典語錄：每天早上，你有兩個簡單的選擇：是睡回籠覺，還是起身追逐夢想。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

挑戰30天在頭條寫日記#

HTML是一種用于創建網頁結構和內容的標記語言，其中包含了許多標簽，可以用于排版、布局和展示內容。本文將詳細介紹HTML中的<tr>和<td>標簽的使用方法，并通過示例展示如何創建表格。

1. <tr>標簽的作用： <tr>標簽代表HTML表格中的一行（行數據），它可以包含一個或多個<td>元素作為單元格。

2. <td>標簽的作用： <td>標簽用于定義表格中的一個單元格（列數據），可以包含文本、圖像、鏈接等內容。

3. 如何使用<tr>和<td>： 在使用<tr>和<td>標簽時，首先需要創建一個<table>元素作為表格的容器，然后在其中嵌套<tr>和<td>標簽，如下所示：

htmlCopy code<table>
  <tr>
    <td>單元格1</td>
    <td>單元格2</td>
  </tr>
  <tr>
    <td>單元格3</td>
    <td>單元格4</td>
  </tr>
</table>

4. 表格樣式： 可以使用CSS來為表格添加樣式，如設置邊框、背景顏色等。以下是一個簡單的示例：

htmlCopy code<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>

5. 示例應用： 以下示例演示了如何使用<tr>和<td>標簽創建一個包含姓名、年齡和城市的簡單表格：

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <td>姓名</td>
    <td>年齡</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>廣州</td>
  </tr>
</table>

</body>
</html>

6. 書籍參考：

"HTML and CSS: Design and Build Websites" by Jon Duckett
"Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins

7. 總結： 通過本文的介紹，我們了解了HTML中<tr>和<td>標簽的基本用法，以及如何創建簡單的表格和添加樣式。使用這些標簽，我們可以輕松地創建具有結構和內容的網頁表格，提升頁面的可讀性和可視性。

在線咨詢

上一篇：html多媒體元素基本屬性
下一篇：好奇！僅 13kB 大小的游戲，源碼長啥樣？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。