tft每日頭條

 > 圖文

 > html 表格和列表的應用

html 表格和列表的應用

圖文 更新时间:2025-01-27 08:15:15
無序列表和有序列表

用于呈現邏輯上并列的具有相關性的數據内容.

<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">

注意: 合并後, 會引發單元格數量的減少!

列表練習案例源碼:


html 表格和列表的應用(HTML中的列表與表格)1

<!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>

表格練習案例代碼:


html 表格和列表的應用(HTML中的列表與表格)2

<!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每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved