HTML学习笔记(五)表格

表格

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

table标签常用属性:
width:表格宽度  单位px(可省略)
height:表格高度  单位px(可省略)
align:表格对齐方式  left|center|right
border:边框属性。边框宽度值。不定义边框属性,表格就不显示边框。
cellpadding:单元格的内边距
cellspacing:单元格的外边距

td标签的合并单元格相关属性:
rowspan:行合并
colspan:列合并


基本结构:
<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>
图示:


<tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。

带标题的表格与跨行或跨列的表格单元格:
<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>
  <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>
  <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>
  <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>



在表格中排列内容:


使用 "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>
图示:


框架(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>
图示:




<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
	<table width="600" align="center" border="1">
    	<tr>
        	<td>A1</td><td>A2</td><td>A3</td>
        </tr>
    	<tr>
        	<td>B1</td><td>B2</td><td>B3</td>
        </tr>
        <tr>
        	<td colspan="3">
            	<table width="600" align="center" border="1">
                	<tr>
                    	<td>C1</td>
                        <td>C2</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>


空单元格  
使用 "&nbsp;" 处理没有内容的单元格。

  • 7
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值