用于呈現邏輯上并列的具有相關性的數據内容.
<ul>
<li></li>
</ul>
ul元素可以用type屬性設置不同的列表标記:disc: 實心圓點
circle: 空心圓圈
square: 實心正方形
<ol>
<li></li>
</ol>
ol元素也可以設置不同的标記:1: 阿拉伯數字
i: 小寫羅馬數字
I: 大寫羅馬數字
A: 大寫字母
a: 小寫字母
定義列表适用呈現包含主題及描述的數據内容.
<dl>
<dt>主題</dt>
<dd>描述</dd>
</dl>
表格
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
thead: 表頭
tbody: 表體
tfoot: 表腳
th: 專用于表頭中的單元格, 其具有自動加粗并且居中的效果.
表格的屬性控制:
border: 邊框
bordercolor: 邊框顔色
width: 寬度
height: 高度
cellspacing: 單元格間距(外)
cellpadding: 單元格填充(内)
align: 表格的位置控制
單元格的屬性控制:
align
valign
如何合并單元格/跨行或跨列?
<td rowspan="number" colspan="number">
注意: 合并後, 會引發單元格數量的減少!
列表練習案例源碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我的電腦文件列表</h1>
<ul>
<li>我的電腦
<ul>
<li>本地磁盤(C:)
<ul>
<li>我的文檔</li>
<li>我的收藏</li>
</ul>
</li>
<li>本地磁盤(D:)
<ul>
<li>我的遊戲</li>
<li>我的資料</li>
<li>我的電影</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
表格練習案例代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="500" height="500">
<tr>
<td colspan="2">1</td>
<!--<td></td>-->
<td rowspan="2">2</td>
</tr>
<tr>
<td rowspan="2">4</td>
<td>5</td>
<!--<td></td>-->
</tr>
<tr>
<!--<td></td>-->
<td colspan="2">3</td>
<!--<td></td>-->
</tr>
</table>
</body>
</html>
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!