软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> HTML学习笔记(五)表格 -> 正文阅读

[Web前端]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>

图示:
[img]http://img.blog.csdn.net/20160331101642547?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

带标签的表格与跨行或跨列的表格单元格:
<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>
图示:
[img]http://img.blog.csdn.net/20160331112506870?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

表格内的标签:在表格内添加别的标签
<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>
[img]http://img.blog.csdn.net/20160331114147548?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
单元格内边距:
<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>
图示:
[img]http://img.blog.csdn.net/20160331114335924?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

单元格外边距:
<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>

[img]http://img.blog.csdn.net/20160331114801707?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center



在表格中排列内容:
使用 "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>
图示:
[img]http://img.blog.csdn.net/20160331162200720?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center


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

[img]http://img.blog.csdn.net/20160331163858367?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

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



......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-04-01 16:48:17  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture
生肖星座 三丰软件 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 美图 中国文化英文版 多播 租车 短信
2017-7-26 10:42:04
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --