首頁 > 開發者 > 網站開發

今天學習了無序列表和有序列表和使用HTML5建立表格

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

ol建立有序列表，該列表可以用設定type=”A/a”

其文法架構為

<ol>

<li></li>

<li></li>

</ol>

Ul建立無序列表, 該列表可以用設定type=” disc/circle/square”

其文法架構為

<ul>

<li></li>

<li></li>

</ul>

 

建立表格其基本屬性有

Cellspacing:定義邊框與邊框的間距大小

Cellpadding:定義邊框與內容的間隙大小

Bgcolor：定義表格的背景顏色

Width：定義表格的寬度

Height：定義表哥的高度

Caption:建立表格的標題

Colspan：合并左右儲存格

 Rowspan：合并上下儲存格

Th：定義標題內容

Dd/dl：自訂欄表

Mark：重點提示

附:

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>20161018</title>

 </head>

 <body>

 <ul>

 <li>月落烏啼霜滿天</li>

 <li>江楓漁火對愁眠</li>

  <li>姑蘇城外寒山寺</li>

 <li>夜半鐘聲到客船</li>

 </ul>

 <ul type="disc">

<li>月落烏啼霜滿天</li>

 <li>江楓漁火對愁眠</li>

 </ul>

 <ul type="circle">

<li>月落烏啼霜滿天</li>

 <li>江楓漁火對愁眠</li>

 </ul>

 <ul type="square">

 <li>月落烏啼霜滿天</li>

 <li>江楓漁火對愁眠</li>

 </ul>

 

  <ol type="A">

 <li>月落烏啼霜滿天</li>

 <li>江楓漁火對愁眠</li>

  <li>姑蘇城外寒山寺</li>

 <li>夜半鐘聲到客船</li>

 </ol>

  <ol>

 <li>月落烏啼霜滿天</li>

 <li>江楓漁火對愁眠</li>

  <li>姑蘇城外寒山寺</li>

 <li>夜半鐘聲到客船</li>

 </ol>

  <!-- 建立嵌套的ul/ol列表 -->

<ol type="A">

 <li>月落烏啼霜滿天</li>

 <li>江楓漁火對愁眠</li>

<ul>

 <li>月落烏啼霜滿天</li>

 <li>江楓漁火對愁眠</li>

 </ul>

<ol type="a">

  <li>姑蘇城外寒山寺</li>

 <li>夜半鐘聲到客船</li>

</ol>

</ol>

<!-- 自訂欄表 -->

<dl>

<dt>電腦</dt>

<dd>是一種能夠按照程式啟動並執行電子裝置</dd>

<dt>顯示器</dt>

<dd>以視覺方式顯示資訊的裝置</dd>

</dl>

<!-- 使用HTML5建立表格

<table>...</table> - 定義表格

<tr> - 定義表行

<th> - 定義表頭

<td> - 定義表元

 其文法結構為

 <table>

 <tr>

 <td></td>

<td></td>

<td></td>

 </tr>

 </table>

 -->

 <!-- 建立一個三行三列的表格 -->

 <table border="2px"  cellpadding="2px" cellspacing="20px" bgcolor="DDSSAA">

 <caption>建立一個三行三列的表格</caption>

 <tr>

 <th>姓名</th>

  <th>學號</th>

  <th>成績</th>

 

 </tr>

 <tr>

 <td align="left">1</td>

<td align="center">1</td>

<td align="rigth">1</td>

 </tr>

 <tr>

 <td>1</td>

<td>1</td>

<td>1</td>

 </tr>

  <tr>

 <td align="left">1</td>

<td align="center">1</td>

<td align="rigth">1</td>

 </tr>

 </table>

 <br/>

 

<table border="2px"  cellpadding="2px" cellspacing="20px" bgcolor="pppppp">

 <caption>建立一個一行三列表格</caption>

 <tr>

 <td bgcolor="red">1</td>

<td bgcolor="green">1</td>

<td bgcolor="blue">1</td>

 </tr>

 </table>

<!-- 儲存格的合并 -->

<br/><br/>

<table width="40" height="40" border="1" cellpadding="20px" cellspacing="3px">

  <tr>

    <td colspan="2" align="center">1</td>

    <td rowspan="2" align="center">2</td>

  </tr>

  <tr>

    <td rowspan="2" align="center">3</td>

    <td align="center">5</td>

  </tr>

  <tr>

    <td colspan="2" align="center">4</td>

  </tr>

</table>

 

<br/><br/>

 </body>

</html>

今天學習了無序列表和有序列表和使用HTML5建立表格

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More