表格的 HTML 元素為 <table> ，列表有兩種，分別是 <ol> 跟 <ul>

<table>
<ol> <ul>

本書表格例如

上述表格的標記碼如下

<div class="table">
    <table class="codedata">
        <tr><th colspan="2">示範表格</th></tr>
        <tr><td>內容1</td><td>內容2</td></tr>
        <tr><td>內容3</td><td>內容4</td></tr>
    </table>
</div>

採用的樣式碼如下

div.table {
  border: 1px solid black;
  margin-right: 1.5em;
  margin-left: 1.5em;
}

table.codedata {
  display: table;
  width: 100%;
  font-family: monospace;
  border: none;
}

table.codedata td {
  padding-top: 4px;
  border-top: 1px solid black;
}

<table> 外層用 <div> 圍起來，樣式碼如下

div.table {
  border: 1px solid black;
  margin-right: 1.5em;
  margin-left: 1.5em;
}

這裡設定 border ，也就是 <table> 外的 border 是用 <div> 設定的，然後左右的 margin 各設定為 1.5em ，這讓這個 <div> 置中，相對繼續看到表格的樣式碼

table.codedata {
  display: table;
  width: 100%;
  font-family: monospace;
  border: none;
}

width 設定為 100% ，因此這個 <table> 會佔滿整的 <div> ，再加上之前 <div> 設定為置中，因此整個表格會顯示出如上左右距離邊界各 1.5em ，然後表格會充滿整個橫幅頁面。

下面 font-family 設定為 monospace ，這是等寬字型的字型家族名稱， border 則是設定為 none 。

屬性 display 是顯示模式， <table> 預設就是 table 。

此外， <td> 也有設定上方的邊框，如下樣式碼

table.codedata td {
  padding-top: 4px;
  border-top: 1px solid black;
}

這是針對 <td> ，因此 <th> 不會有上方的邊框。

<ol> 舉例如下

1. 內容1
2. 內容2
3. 內容3
4. 內容4

上述 <ol> 的標記碼如下

<ol class="number">
    <li>內容1</li>
    <li>內容2</li>
    <li>內容3</li>
    <li>內容4</li>
</ol>

樣式碼如下

ol.number li {
  list-style-type: decimal;
  margin-left: 2em;
}

其中 list-style-type 有非常多類型，如下逐項設定不同的 list-style-type ，然後將該列表內容改成所設定的 list-style-type ，再加上數字，表示是第幾項

1. armenian 1
2. cjk-ideographic 2
3. decimal 3
4. decimal-leading-zero 4
5. georgian 5
6. hebrew 6
7. hiragana 7
8. hiragana-iroha 8
9. katakana 9
10. katakana-iroha 10
11. lower-alpha 11
12. lower-greek 12
13. lower-latin 13
14. lower-roman 14
15. upper-alpha 15
16. upper-greek 16
17. upper-latin 17
18. upper-roman 18
19. none 19

<ul> 舉例如下

• 內容1
• 內容2
• 內容3
• 內容4

標記碼如下

<ul class="circle">
    <li>內容1</li>
    <li>內容2</li>
    <li>內容3</li>
    <li>內容4</li>
</ul>

樣式碼如下

ul.circle li {
  list-style-type: circle;
  margin-left: 2em;
}

<ul> 可用的 list-style-type 較少，有如下三種

• disc
• circle
• square

未來 <ul> 的 list-style-type 可能會增加，不過也要看瀏覽器或 EPUB 閱讀器支不支援，下一個單元繼續介紹多媒體元素及相關樣式設定。