#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>