html中的table詳細說明
發(fā)表時間:2023-09-10 來源:明輝站整理相關軟件相關文章人氣:
[摘要]本篇文章主要介紹HTML中的table,感興趣的朋友參考下,希望對大家有所幫助。普通表格,簡單的HTML表格由table元素以及tr、td和th元素組成,其中tr是指表格行,td是指單元格,th定義表頭。空單元格就直接不填即可,或者用 。<table> <tr> <...
本篇文章主要介紹HTML中的table,感興趣的朋友參考下,希望對大家有所幫助。
普通表格,簡單的HTML表格由table元素以及tr、td和th元素組成,其中tr是指表格行,td是指單元格,th定義表頭。空單元格就直接不填即可,或者用 。
<table>
<tr>
<th>表頭</th>
<th>表頭</th>
<th>表頭</th>
</tr>
<tr>
<td>單元格1
</td>
<td></td>
<td>單元格3</td>
</tr>
</table>
2.帶有邊框的表格。border元素表示表格的邊框,默認單位是px,cellspcing表示表格與表格之間的間距,cellpadding表示內邊距/內填充的距離。
<table border="1" cellspacing="10" cellpadding="30">
<tr>
<th>表頭</th>
<th>表頭</th>
<th>表頭</th>
</tr>
<tr>
<td>單元格1</td>
<td>單元格2</td>
<td>單元格3</td>
</tr>
</table>
3.帶有背景圖片或顏色的表格,注意:bgcolor表示顏色,而background不能直接在html里面添加顏色(這句話說錯了,是使用的方式錯誤,直接使用內聯(lián)樣式書寫的格式是style="background:red"或者是style="background-color:red"),在table中添加就是對整個表格設置,如果在單獨的tr或者td中設置就是對單獨的行或者單元格來進行設置。
<table border="1">
<tr>
<th>表頭</th>
<th>表頭</th>
<th>表頭</th>
</tr>
<tr>
<td>單元格1</td>
<td>單元格2</td>
<td>單元格3</td>
</tr>
</table>
4、跨行和跨列的表格,rowspan表示跨行,colspan表示跨列,跨列的話就在當前表格行內刪除,跨行的話就在下方的表格行內刪除。
<table border="1">
<caption>跨行</caption>
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">電話</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
<table border="1">
<caption>跨列</caption>
<tr>
<th>姓名</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
5.帶有標題的表格,caption表示表格的標題,也可以用其他標簽比如p標簽來定位表格標題,但使用caption的好處是他會跟著表格一起走,默認是在和表格居中對齊。
6.在表格單元中排列內容,比如在單元格中添加段落,列表等。
<table border="1">
<tr>
<td>
<p>這是一個段落,hello World!</p>
</td>
<td>
<ul>
<li>這是一個列表
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
7.frame框架屬性,規(guī)定外側邊框的哪個部分是可見的。//暫時不會使用。
相關推薦:
HTML頁面table滾動條的實現(xiàn)
ElTableColumn擴展方法詳解
關于SQL ALTER TABLE 語句的相關操作
以上就是html中的table詳解的詳細內容,更多請關注php中文網(wǎng)其它相關文章!
網(wǎng)站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網(wǎng)站。