软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> HTML学习笔记(五)表格 -> 正文阅读
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解

[Web前端]HTML学习笔记(五)表格

  2016-04-01 16:49:46

表格

表格<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>
  <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>
图示:



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



上一篇文章      下一篇文章      查看所有文章
2016-04-01 16:48:17  
360图书馆 论文大全 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 人民的名义 人民的名义在线看 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图
中国文化英文 多播视频 装修知识库
2017-4-29 9:44:16
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --