整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
table{
table-layout:fixed;//布局方式要固定
width:65%;
border-collapse:collapse;
}
td{
white-space:nowrap;//不允許文本換行
overflow:hidden; //超部分自動(dòng)隱藏
text-overflow:ellipsis; //超出部分以省略號(hào)顯示
border:black solid 1px;
}
li{
display:block;
float:left;
width:33.3%;
white-space:nowrap;
overflow:hidden;
/*如果要交超出內(nèi)容以...顯示，則需要增加屬性定義：*/
text-overflow:ellipsis;
}
表格和列表的最終效果如下：
-End-
篇文章介紹了div標(biāo)簽的作用，我們這篇文章主要來看下過氣表格標(biāo)簽table的語法與使用。
在div沒有出現(xiàn)之前，table曾是做網(wǎng)頁的中堅(jiān)力量。記得在開始學(xué)網(wǎng)頁的時(shí)候，div是神馬，我不造呀！做網(wǎng)頁還用div嗎，就只用table就可以了，各種表格嵌套加嵌套，一個(gè)網(wǎng)頁就拼湊出來了。但table寫的布局頁面做維護(hù)就比較令人頭痛欲裂了。因?yàn)閠able是一層一層嵌套，標(biāo)簽量冗余過多。所以修改起來就是動(dòng)一發(fā)而牽全身。維護(hù)起來格外麻煩，往往是拆東墻補(bǔ)西墻。所以它后來就慢慢被div所替代。但是在數(shù)據(jù)列表上還是用table形式來寫比較的合理，所以現(xiàn)在table多用于網(wǎng)站后臺(tái)的表格數(shù)據(jù)處理中。
簡單的表格由table元素以及一個(gè)或多個(gè)tr（行標(biāo)簽）、th（表頭單元格標(biāo)簽）、td（普通單元格標(biāo)簽）等標(biāo)簽所組成，當(dāng)然復(fù)雜的表格還包括caption（表格標(biāo)題）、col(定義列)、colgroup(對表格中的列進(jìn)行組合)、thead（組合表頭的內(nèi)容）tbody(組合表格的主題內(nèi)容)、tfoot(組合表格的腳注內(nèi)容)等這里我們先簡單了解下即可。
定義表格：<table></table>
創(chuàng)建表行：<tr></tr>
創(chuàng)建列(單元格):<th></th>（表頭）、<td></td>（表格單元）
注意：默認(rèn)情況下，每行中的列數(shù)是統(tǒng)一的。
比如我們想創(chuàng)建一個(gè)姓名、年齡、分?jǐn)?shù)和日期的數(shù)據(jù)表格，并設(shè)置border為1，我們可以使用table來制作。具體的表格代碼如下圖所示：
在網(wǎng)頁中呈現(xiàn)的效果就如下圖所示：
這時(shí)候有的人就會(huì)說了，為什么這個(gè)表格看起來這么奇怪，邊框都是有空隙的呢？我們只需要給表格添加一些特殊的樣式，即可制作一個(gè)比較漂亮好看的表格了。添加的樣式代碼：
在網(wǎng)頁中呈現(xiàn)的效果就如下圖所示：
現(xiàn)在我們的表格是不是看著比較的清新了，上面的css代碼中為表格添加了背景、邊框以及去掉了粗的邊線。具體的css代碼我們會(huì)在以后的課程中為大家介紹，大家在這里只需要知道并了解table標(biāo)簽的作用以及使用就可以了。沒事可以多用table寫一寫表格，熟能生巧。
附贈(zèng)一句經(jīng)典語錄：每天早上，你有兩個(gè)簡單的選擇：是睡回籠覺，還是起身追逐 夢想 。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。
挑戰(zhàn)30天在頭條寫日記#
HTML是一種用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的標(biāo)記語言，其中包含了許多標(biāo)簽，可以用于排版、布局和展示內(nèi)容。本文將詳細(xì)介紹HTML中的<tr>和<td>標(biāo)簽的使用方法，并通過示例展示如何創(chuàng)建表格。
1. <tr>標(biāo)簽的作用： <tr>標(biāo)簽代表HTML表格中的一行（行數(shù)據(jù)），它可以包含一個(gè)或多個(gè)<td>元素作為單元格。
2. <td>標(biāo)簽的作用： <td>標(biāo)簽用于定義表格中的一個(gè)單元格（列數(shù)據(jù)），可以包含文本、圖像、鏈接等內(nèi)容。
3. 如何使用<tr>和<td>： 在使用<tr>和<td>標(biāo)簽時(shí)，首先需要?jiǎng)?chuàng)建一個(gè)<table>元素作為表格的容器，然后在其中嵌套<tr>和<td>標(biāo)簽，如下所示：
htmlCopy code<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
4. 表格樣式： 可以使用CSS來為表格添加樣式，如設(shè)置邊框、背景顏色等。以下是一個(gè)簡單的示例：
htmlCopy code<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
5. 示例應(yīng)用： 以下示例演示了如何使用<tr>和<td>標(biāo)簽創(chuàng)建一個(gè)包含姓名、年齡和城市的簡單表格：
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. 書籍參考：
7. 總結(jié)： 通過本文的介紹，我們了解了HTML中<tr>和<td>標(biāo)簽的基本用法，以及如何創(chuàng)建簡單的表格和添加樣式。使用這些標(biāo)簽，我們可以輕松地創(chuàng)建具有結(jié)構(gòu)和內(nèi)容的網(wǎng)頁表格，提升頁面的可讀性和可視性。
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
