HTML学习笔记(五)表格

表格

表格<table> 标签来定义。每个表格的若干(由<tr> 标签定义),每行被分割为若干单元格(由<td> 标签定义,即)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

border为边框属性。不定义边框属性,表格就不显示边框。
基本结构:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

举个栗子:
<html>
    <body>
        <h3>两行三列小栗子:</h3>
        <table border="3">
            <tr>
               <td>哈哈</td>
               <td>呵呵</td>
               <td>嘻嘻</td>
            </tr>
            <tr>
               <td>哼哼</td>
               <td>嗯嗯</td>
               <td>噢噢</td>
            </tr>
         </table>
     </body>
</html>


表格的表头 使用<th> 标签进行定义:


栗子延伸:
<html>
  <body>
    <table border="3">
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
      <tr>
        <td>哈哈</td>
        <td>呵呵</td>
        <td>嘻嘻</td>
      </tr>
      <tr>
        <td>哼哼</td>
        <td>嗯嗯</td>
        <td>噢噢</td>
      </tr>
    </table>
    <br/>
    <br/>
    <table border="2">
      <tr>
        <th>表头1</th>
        <td>哈哈</td>
        <td>哼哼</td>
      </tr>
      <tr>
        <th>表头2</th>
        <td>呵呵</td>
        <td>嗯嗯</td>
      </tr>
      <tr>
        <th>表头3</th>
        <td>嘻嘻</td>
        <td>噢噢</td>
      </tr>
    </table>
  </body>
</html>
图示:
HTML学习笔记(五)表格_第1张图片
带标签的表格与跨行或跨列的表格单元格:
<html>
  <body>
    <h4>带标题的粗边框表格</h4>
    <table border="6">
      <caption>我的标题</caption>
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
      </tr>
    </table>
    <br/>
    <br/>
    <h4>横跨两列的单元格</h4>
    <table border="1">
      <tr>
        <th colspan="2">姓名</th>
        <th>职业</th>
      </tr>
      <tr>
        <td>小白</td>
        <td>小黑</td>
        <td>攻城狮</td>
      </tr>
    </table>
    <h4>横跨两行的单元格:</h4>
    <table border="1">
      <tr>
        <th rowspan="2">姓名</th>
        <td>小白</td>
      </tr>
      <tr>
        <td>小黑</td>
      </tr>
      <tr>
        <th>职业</th>
        <td>攻城狮</td>
      </tr>
    </table>
  </body>
</html>
图示:
HTML学习笔记(五)表格_第2张图片

表格内的标签:显示在不同的元素内显示元素
<html>
  <body>
    <table border="2">
      <tr>
        <td>
          <p>我是一个段落</p>
          <p>我也是一个段落</p>
        </td>
        <td>
        我这儿有个表格:
          <table border="1">
            <tr>
              <td>A</td>
              <td>B</td>
            </tr>
            <tr>
              <td>C</td>
              <td>D</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
        我这儿有两个个列表:
          <ul>
            <li>橘子</li>
            <li>葡萄</li>
            <li>菠萝</li>
          </ul>
          <ul>
            <li>美术</li>
            <li>音乐</li>
            <li>骑行</li>
          </ul>
        </td>
        <td>该写点儿啥?</td>
      </tr>
    </table>
  </body>
</html>
HTML学习笔记(五)表格_第3张图片

单元格内边距:
<html>
  <body>
    <h4>没有单元格内边距:</h4>
    <table border="1">
      <tr>
        <td>小A</td>
        <td>小B</td>
      </tr>
      <tr>
        <td>小C</td>
        <td>小D</td>
      </tr>
    </table>
    <br/>
    <h4>带有单元格内边距:</h4>
    <table border="1" cellpadding="8">
      <tr>
        <td>小A</td>
        <td>小B</td>
      </tr>
      <tr>
        <td>小C</td>
        <td>小D</td>
      </tr>
    </table>
  </body>
</html>
图示:
HTML学习笔记(五)表格_第4张图片

单元格外边距:
<html>
  <body>
    <h4>没有单元格外边距:<h4>
    <table border="1">
      <tr>
        <td>小A</td>
        <td>小B</td>
      </tr>
      <tr>
        <td>小C</td>
        <td>小D</td>
      </tr>
    </table>
    <br/>
    <h4>带有单元格外边距:</h4>
    <table border="1"cellspacing="8">
      <tr>
        <td>小A</td>
        <td>小B</td>
      </tr>
      <tr>
        <td>小C</td>
        <td>小D</td>
      </tr>
    </table>
  </body>
</html>

HTML学习笔记(五)表格_第5张图片

在表格中排列内容:
使用 "align" 属性排列单元格内容。
<html>
  <body>
    <h4>没有使用align属性时:</h4>
    <table width="300"border="1">
      <tr>
        <th>姓名</th>
        <th>爱好</th>
        <th>职业</th>
      </tr>
      <tr>
        <td>小白</td>
        <td>看书</td>
        <td>程序猿</td>
      </tr>
      <tr>
        <td>小黑</td>
        <td>绘画</td>
        <td>攻城狮</td>
      </tr>
    </table>
    <h4>使用了align属性后:</h4>
    <table width="300"border="1">
      <tr>
        <th align="left">姓名</th>
        <th align="right">爱好</th>
        <th align="right">职业</th>
      </tr>
      <tr>
        <td align="left">小白</td>
        <td align="right">看书</td>
        <td align="right">程序猿</td>
      </tr>
      <tr>
        <td align="left">小黑</td>
        <td align="right">绘画</td>
        <td align="right">攻城狮</td>
      </tr>
    </table>
  </body>
</html>
图示:
HTML学习笔记(五)表格_第6张图片

框架(frame)属性:
控制围绕表格的边框
<html>
  <body>
    <h5>frame="box":</h5>
    <table frame="box">
      <tr>
        <th>姓名</th>
        <th>爱好</th>
      </tr>
      <tr>
        <td>小慕</td>
        <td>绘画</td>
      </tr>
    </table>
    <h5>frame="above":</h5>
    <table frame="above">
      <tr>
        <th>姓名</th>
        <th>爱好</th>
      </tr>
      <tr>
        <td>小慕</td>
        <td>绘画</td>
      </tr>
    </table>
    <h5>frame="below":</h5>
    <table frame="below":>
      <tr>
        <th>姓名</th>
        <th>爱好</th>
      </tr>
      <tr>
        <td>小慕</td>
        <td>绘画</td>
      </tr>
    </table>
    <h5>frame="hsides":</h5>
    <table frame="hsides":>
      <tr>
        <th>姓名</th>
        <th>爱好</th>
      </tr>
      <tr>
        <td>小慕</td>
        <td>绘画</td>
      </tr>
    </table>
    <h5>frame="vsides":</h5>
    <table frame="vsides":>
      <tr>
        <th>姓名</th>
        <th>爱好</th>
      </tr>
      <tr>
        <td>小慕</td>
        <td>绘画</td>
      </tr>
    </table>
  </body>
</html>
图示:
HTML学习笔记(五)表格_第7张图片

更多栗子,参见w3cschool--html表格!
空单元格  
使用 "&nbsp;" 处理没有内容的单元格。
向表格中添加背景颜色或图像
向表格单元添加背景颜色或背景图像
                     ......

你可能感兴趣的:(html)