HTML 的列表和表格

列表分为无序列表和有序列表;

表格分为表头表行和标准单元格。

HTML 的列表

HTML 的列表分为无序列表(unordered list)和有序列表(ordered list)。

无序列表使用 <ul></ul> 标签,有序列表使用 <ol></ol> 标签。

<b>国民网站</b>
<ul>
  <li><a href="http://www.baidu.com">百度</a></li>
  <li><a href="http://www.douban.com">豆瓣</a></li>
  <li><a href="http://www.taobao.com">淘宝</a></li>
</ul>

<b>购物清单</b>
<ol>
  <li><a href="http://www.baidu.com">咖啡</a></li>
  <li><a href="http://www.douban.com">豆腐</a></li>
  <li><a href="http://www.taobao.com">大米</a></li>
</ol>

HTML 的列表和表格

列表之间可以相互嵌套,不同的层级显示为不同的缩进深度。

<ul>
  <li>嫌疑人</li>
     <ol>
     <li>张三</li>
     <li>李四</li>
     <li>刘大嘴</li>
     <li>王二麻子</li>
     </ol>
   <li>心态</li>
   <li>命运感</li>
   <li>成绩<li>
   <li>事业</li>
<ul>

HTML 的列表和表格

HTML 的表格

整个表格用 <table></table> 标签括住。

表头写在每列的最上面,使用 <th></th> 标签,表行和单元格分别是 <tr></tr><td></td>

<style>
  table,th,td{
    border:1px solid black;
    color:yellow;
    background-color:red;
  }
</style>

<table>
  <th colspan="4px">在逃嫌犯</th>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>国籍</th>
  </tr>
  <tr>
    <td>凯瑟琳</td>
    <td>女</td>
    <td>20</td>
    <td>美国</td>
  </tr>
  <tr>
    <td>金郑恺</td>
    <td>男</td>
    <td>29</td>
    <td>韩国</td>
  </tr>
  <tr>
    <td>山下三八</td>
    <td>男</td>
    <td>45</td>
    <td>日本</td>
  </tr>
</table>

HTML 的列表和表格