#HTML#表格_學習札記

1.簡易2*2表格

<table>
    <tr>
        <td>ko</td>
        <td>be</td>
    </tr>
    <tr>
        <td>da</td>
        <td>mn</td>
    </tr>
</table>

2.帶邊框表格

 

<table border="1">
    <tr>
        <td>ko</td>
        <td>be</td>
    </tr>
    <tr>
        <td>da</td>
        <td>mn</td>
    </tr>
</table>

3.設置表格寬度

 

 4.單元格寬度絕對值

<table border="1" width="200px">
  <tr>
      <td width="50px">1</td>
      <td>2</td>
  </tr>

  <tr>
      <td>3</td>
      <td>4</td>
  </tr>

  <tr>
      <td>a</td>
      <td>b</td>
  </tr>

</table>

5.單元格寬度相對值

<table border="1" width="200px">
  <tr>
      <td width="80%">1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
 
</table>

 

6.單元格水平對齊

<table border="1" width="200px">
  <tr>
      <td width="50%" align="left">1</td>
      <td>2</td>
  </tr>

  <tr>
      <td align="center">3</td>
      <td>4</td>
  </tr>

  <tr>
      <td align="right">a</td>
      <td>b</td>
  </tr>

</table>

 

7.單元格垂直對齊

<table border="1">
    <tr>
        <td width='50%' valign='middle'>ko</td>
        <td>be<br>
            gg<br>
            gg<br>
        </td>
    </tr>
    <tr>
        <td width='50%' valign='top'>ko</td>
        <td>be<br>
            gg<br>
            gg<br>
        </td>
    </tr>
    <tr>
        <td width='50%' valign='bottom'>ko</td>
        <td>be<br>
            gg<br>
            gg<br>
        </td>
    </tr>
</table>

 

8.水平橫跨行操作

 

 

9.垂直橫跨行操作

 

 

10.設置背景色 

<table border="1">
    <tr bgcolor='purple'>
        <td width='50%' valign='middle'>ko</td>
        <td>be<br>
            gg<br>
            gg<br>
        </td>
    </tr>
    <tr>
        <td width='50%' valign='top'>ko</td>
        <td>be<br>
            gg<br>
            gg<br>
        </td>
    </tr>
    <tr>
        <td width='50%' valign='bottom' bgcolor='yellow'>ko</td>
        <td>be<br>
            gg<br>
            gg<br>
        </td>
    </tr>
</table>