學習誌

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      製作表格
    </title>
  </head>
  <body>
    <table>
      <caption>
        九九乘法表
      </caption>
      <tbody>
        <tr>
          <td>  </td><td> 1</td><td> 2</td><td> 3</td><td> 4</td>
          <td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td>
        </tr>
        <tr>
          <td> 1</td><td> 1</td><td> 2</td><td> 3</td><td> 4</td>
          <td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td>
        </tr>
        <tr>
          <td> 2</td><td> 2</td><td> 4</td><td> 6</td><td> 8</td>
          <td>10</td><td>12</td><td>14</td><td>16</td><td>18</td>
        </tr>
        <tr>
          <td> 3</td><td> 3</td><td> 6</td><td> 9</td><td>12</td>
          <td>15</td><td>18</td><td>21</td><td>24</td><td>27</td>
        </tr>
        <tr>
          <td> 4</td><td> 4</td><td> 8</td><td>12</td><td>16</td>
          <td>20</td><td>24</td><td>28</td><td>32</td><td>36</td>
        </tr>
        <tr>
          <td> 5</td><td> 5</td><td>10</td><td>15</td><td>20</td>
          <td>25</td><td>30</td><td>35</td><td>40</td><td>45</td>
        </tr>
        <tr>
          <td> 6</td><td> 6</td><td>12</td><td>18</td><td>24</td>
          <td>30</td><td>36</td><td>42</td><td>48</td><td>54</td>
        </tr>
        <tr>
          <td> 7</td><td> 7</td><td>14</td><td>21</td><td>28</td>
          <td>35</td><td>42</td><td>49</td><td>56</td><td>63</td>
        </tr>
        <tr>
          <td> 8</td><td> 8</td><td>16</td><td>24</td><td>32</td>
          <td>40</td><td>48</td><td>56</td><td>64</td><td>72</td>
        </tr>
        <tr>
          <td> 9</td><td> 9</td><td>18</td><td>27</td><td>36</td>
          <td>45</td><td>54</td><td>63</td><td>72</td><td>81</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

以上的範例說明：要製作表格就用table，<table></table>可包含最多一個caption，來表示此表格的標題(如果表格不需要標題，可以不用caption)，表格內的每一橫行要以<tr></tr>夾住，而一行內的每一格，則以<td></td>夾住。

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      製作表格
    </title>
  </head>
  <body>
    <table border="1">
      <caption>
        九九乘法表
      </caption>
      <tbody>
        <tr>
          <td>  </td><td> 1</td><td> 2</td><td> 3</td><td> 4</td>
          <td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td>
        </tr>
        <tr>
          <td> 1</td><td> 1</td><td> 2</td><td> 3</td><td> 4</td>
          <td> 5</td><td> 6</td><td> 7</td><td> 8</td><td> 9</td>
        </tr>
        <tr>
          <td> 2</td><td> 2</td><td> 4</td><td> 6</td><td> 8</td>
          <td>10</td><td>12</td><td>14</td><td>16</td><td>18</td>
        </tr>
        <tr>
          <td> 3</td><td> 3</td><td> 6</td><td> 9</td><td>12</td>
          <td>15</td><td>18</td><td>21</td><td>24</td><td>27</td>
        </tr>
        <tr>
          <td> 4</td><td> 4</td><td> 8</td><td>12</td><td>16</td>
          <td>20</td><td>24</td><td>28</td><td>32</td><td>36</td>
        </tr>
        <tr>
          <td> 5</td><td> 5</td><td>10</td><td>15</td><td>20</td>
          <td>25</td><td>30</td><td>35</td><td>40</td><td>45</td>
        </tr>
        <tr>
          <td> 6</td><td> 6</td><td>12</td><td>18</td><td>24</td>
          <td>30</td><td>36</td><td>42</td><td>48</td><td>54</td>
        </tr>
        <tr>
          <td> 7</td><td> 7</td><td>14</td><td>21</td><td>28</td>
          <td>35</td><td>42</td><td>49</td><td>56</td><td>63</td>
        </tr>
        <tr>
          <td> 8</td><td> 8</td><td>16</td><td>24</td><td>32</td>
          <td>40</td><td>48</td><td>56</td><td>64</td><td>72</td>
        </tr>
        <tr>
          <td> 9</td><td> 9</td><td>18</td><td>27</td><td>36</td>
          <td>45</td><td>54</td><td>63</td><td>72</td><td>81</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

以上的範例介紹table的屬性之一：border。它決定了表格框線的粗細，border的預設值為最小值0，最大值我沒試過，不清楚。不要設得太大，因為框線太粗也不是很好看。

th和td很類似，都是用於tr內的元素，且擁有相同的屬性，不同之處在於：th的內容會變成粗體字且置中對齊，而td的內容只會靠左對齊。

在製作表格的時候，常會有一些跨橫行或跨直列的格子。

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      製作表格
    </title>
  </head>
  <body>
    <table border="2">
      <tbody>
        <tr><td>1</td><td rowspan="2">2</td><td>3</td></tr>
        <tr><td>4</td><td>6</td></tr>
        <tr><td>7</td><td>8</td><td>9</td></tr>
      </tbody>
    </table>
    <table border="2">
      <tbody>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td colspan="2">4</td><td>6</td></tr>
        <tr><td>7</td><td>8</td><td>9</td></tr>
      </tbody>
    </table>
    <table border="2">
      <tbody>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td colspan="2" align="right">6</td></tr>
        <tr><td>7</td><td>8</td><td>9</td></tr>
      </tbody>
    </table>
    <table border="2">
      <tbody>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td rowspan="2" valign="bottom">8</td><td>6</td></tr>
        <tr><td>7</td><td>9</td></tr>
      </tbody>
    </table>
    <table border="10">
      <tbody>
        <tr><td rowspan="2" colspan="2">十字<br />路口</td><td>&nbsp;&nbsp;&nbsp;</td><td rowspan="2" colspan="2">十字<br />路口</td></tr>
        <tr><td>&nbsp;&nbsp;&nbsp;</td></tr>
        <tr><td>&nbsp;&nbsp;&nbsp;</td><td>&nbsp;&nbsp;&nbsp;</td><td>&nbsp;&nbsp;&nbsp;</td><td>&nbsp;&nbsp;&nbsp;</td><td>&nbsp;&nbsp;&nbsp;</td></tr>
        <tr><td rowspan="2" colspan="2">十字<br />路口</td><td>&nbsp;&nbsp;&nbsp;</td><td rowspan="2" colspan="2">十字<br />路口</td></tr>
        <tr><td>&nbsp;&nbsp;&nbsp;</td></tr>
      </tbody>
    </table>
    <table border="5">
      <tbody>
        <tr><td colspan="2" align="right">北</td><td rowspan="2" valign="bottom">東</td></tr>
        <tr><td rowspan="2" valign="top">西</td><th>中</th></tr>
        <tr><td colspan="2" align="left">南</td></tr>
      </tbody>
    </table>
    <table border="3">
      <tbody>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td></td><td>6</td></tr>
        <tr><td>7</td><td>8</td><td>9</td></tr>
      </tbody>
    </table>
    <table border="3">
      <tbody>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>&nbsp;</td><td>6</td></tr>
        <tr><td>7</td><td>8</td><td>9</td></tr>
      </tbody>
    </table>
  </body>
</html>

table的rowspan設定此格向下跨行數，預設值為1 ；colspan設定此格向右跨列數，預設值為1 ；align設定水平對齊位置，可以設定的值有：left、center、right...等。valign設定垂直對齊位置，可以設定的值有：top、middle、bottom...等。rowspan的預設值為1，colspan的預設值為1，align的預設值為left，valign的預設值為middle。

在製作表格的時候，常會用 使表格能排得整齊。 何時該用？該用多少？這需要多練習，憑經驗決定。

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      製作表格
    </title>
  </head>
  <body>
    <table border="20" cellspacing="15">
      <caption>
        九九乘法表
      </caption>
      <tbody>
        <tr>
          <th>&nbsp;&nbsp;&nbsp;</th><th>&nbsp;1&nbsp;</th>
          <th>&nbsp;2&nbsp;</th><th>&nbsp;3&nbsp;</th>
          <th>&nbsp;4&nbsp;</th><th>&nbsp;5&nbsp;</th>
          <th>&nbsp;6&nbsp;</th><th>&nbsp;7&nbsp;</th>
          <th>&nbsp;8&nbsp;</th><th>&nbsp;9&nbsp;</th>
        </tr>
        <tr align="right">
          <th>1</th><td>1</td><td>2</td><td>3</td><td>4</td>
          <td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>
        </tr>
        <tr align="right">
          <th>2</th><td>2</td><td>4</td><td>6</td><td>8</td>
          <td>10</td><td>12</td><td>14</td><td>16</td><td>18</td>
        </tr>
        <tr align="right">
          <th>3</th><td>3</td><td>6</td><td>9</td><td>12</td>
          <td>15</td><td>18</td><td>21</td><td>24</td><td>27</td>
        </tr>
        <tr align="right">
          <th>4</th><td>4</td><td>8</td><td>12</td><td>16</td>
          <td>20</td><td>24</td><td>28</td><td>32</td><td>36</td>
        </tr>
        <tr align="right">
          <th>5</th><td>5</td><td>10</td><td>15</td><td>20</td>
          <td>25</td><td>30</td><td>35</td><td>40</td><td>45</td>
        </tr>
        <tr align="right">
          <th>6</th><td>6</td><td>12</td><td>18</td><td>24</td>
          <td>30</td><td>36</td><td>42</td><td>48</td><td>54</td>
        </tr>
        <tr align="right">
          <th>7</th><td>7</td><td>14</td><td>21</td><td>28</td>
          <td>35</td><td>42</td><td>49</td><td>56</td><td>63</td>
        </tr>
        <tr align="right">
          <th>8</th><td>8</td><td>16</td><td>24</td><td>32</td>
          <td>40</td><td>48</td><td>56</td><td>64</td><td>72</td>
        </tr>
        <tr align="right">
          <th>9</th><td>9</td><td>18</td><td>27</td><td>36</td>
          <td>45</td><td>54</td><td>63</td><td>72</td><td>81</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

以上的範例說明：table的一個屬性cellspacing，可用來設定格子間的距離，單位是像素。

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      製作表格
    </title>
  </head>
  <body>
    <table border="20" cellpadding="15">
      <caption>
        九九乘法表
      </caption>
      <tbody>
        <tr>
          <th>&nbsp;&nbsp;&nbsp;</th><th>&nbsp;1&nbsp;</th>
          <th>&nbsp;2&nbsp;</th><th>&nbsp;3&nbsp;</th>
          <th>&nbsp;4&nbsp;</th><th>&nbsp;5&nbsp;</th>
          <th>&nbsp;6&nbsp;</th><th>&nbsp;7&nbsp;</th>
          <th>&nbsp;8&nbsp;</th><th>&nbsp;9&nbsp;</th>
        </tr>
        <tr align="right">
          <th>1</th><td>1</td><td>2</td><td>3</td><td>4</td>
          <td>5</td><td>6</td><td>7</td><td>8</td><td>9</td>
        </tr>
        <tr align="right">
          <th>2</th><td>2</td><td>4</td><td>6</td><td>8</td>
          <td>10</td><td>12</td><td>14</td><td>16</td><td>18</td>
        </tr>
        <tr align="right">
          <th>3</th><td>3</td><td>6</td><td>9</td><td>12</td>
          <td>15</td><td>18</td><td>21</td><td>24</td><td>27</td>
        </tr>
        <tr align="right">
          <th>4</th><td>4</td><td>8</td><td>12</td><td>16</td>
          <td>20</td><td>24</td><td>28</td><td>32</td><td>36</td>
        </tr>
        <tr align="right">
          <th>5</th><td>5</td><td>10</td><td>15</td><td>20</td>
          <td>25</td><td>30</td><td>35</td><td>40</td><td>45</td>
        </tr>
        <tr align="right">
          <th>6</th><td>6</td><td>12</td><td>18</td><td>24</td>
          <td>30</td><td>36</td><td>42</td><td>48</td><td>54</td>
        </tr>
        <tr align="right">
          <th>7</th><td>7</td><td>14</td><td>21</td><td>28</td>
          <td>35</td><td>42</td><td>49</td><td>56</td><td>63</td>
        </tr>
        <tr align="right">
          <th>8</th><td>8</td><td>16</td><td>24</td><td>32</td>
          <td>40</td><td>48</td><td>56</td><td>64</td><td>72</td>
         </tr>
        <tr align="right">
          <th>9</th><td>9</td><td>18</td><td>27</td><td>36</td>
          <td>45</td><td>54</td><td>63</td><td>72</td><td>81</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

以上的範例說明：table的一個屬性cellpadding，可用來設定格子邊緣和格子內容的距離，單位是像素。