前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >表格及布局——0606上午

表格及布局——0606上午

作者头像
二十三年蝉
发布2018-02-27 18:11:41
1.8K0
发布2018-02-27 18:11:41
举报
文章被收录于专栏:闻道于事

今天上午学习了表格的应用以及如何用表格进行页面布局。以下面代码为例:

代码语言:js
复制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
  </head>
  <body>
    <table width="100%" border="0" cellspacing="1" cellpadding="1">
        <tr height="60">
            <td colspan="3" bgcolor="#CCFFCC">
    	          <span>首页&nbsp;&nbsp;</span>
                  <span>产品中心&nbsp;&nbsp;</span>
                  <span>关于我们&nbsp;&nbsp;</span>
                  <span>联系我们&nbsp;&nbsp;</span>
            </td>
        </tr>
        <tr height="550">
            <td colspan="3" align="center">
    	          <img src="../../动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" height="550" width="1000"/>
            </td>
        </tr>
        <tr >
            <td align="center" width="32%">
    	          这是一条新闻<br />
                  这是一条新闻<br />
                  这是一条新闻<br />
            </td>
            <td align="center" width="35%">
    	          这是一件产品<br>
                  这是一件产品<br>
                  这是一件产品<br>
            </td>
            <td align="center" width="33%">
    	          这是一个名字<br>
                  这是一个名字<br>
                  这是一个名字<br>
            </td>
        </tr>
        <tr>
            <td colspan="3" bgcolor="#999999" align="center">
              copyright (c) 我的网 2014-2012,All  RightsReserved | 京CIP证04118号音像制品经营许可证 京音网8号
            </td>
        </tr>
    </table>
  </body>
</html>

在Dreamweaver中可以直接通过设计页面—插入来直接添加一个表格,还可以直接调整相应的行数、列数、宽高、颜色、边距、合并等各种属性。

<table>

<table>代表表格开始

</table>代表表格结束

表格里可以嵌套表格。

<table>相关属性

  width:表格宽度,表示方法有像素和百分比

  border:边框粗细,默认不写为0

  cellspacing:单元格的边距,单元格之间的距离

  cellpadding:单元格的间距,单元格和内容之间的距离

  bordercolor:边框颜色

  bgcolor:背景色

  align:表格在页面中的位置 <tr>代表行

  相关属性:

  height:行高   bgcolor:行的背景色

  <tr>没有宽度,表格一行的宽度在<table>里设置

<td>代表单元格

  相关属性:

  width:单元格的宽度

  height:单元格的高度

  align:水平对齐方式 left左 right右 center中

  valign:(vertial-align)垂直对齐方式 top上 middle中 bottom下

  bgcolor:背景色

  colspan:在行里面合并列(合并几个单元格)

  rowspan:在列里面合并行(合并几个单元格) <th>

通常是在第一行里面代替<td> 用来做表头单元格的,相当于<td>中的<h1>标题,自动加粗自动居中。

<tbody>

所有数据的行写在<tbody>里面,正常用不到。特殊情况会用到。

拓展:

表格的标题

<caption align=# valign=#> ... </caption>

内容会显示在表格上方

表格可以添加背景图片,background属性,可以用在<table>和<td>中给整个表格和单个单元格添加背景图片,不能够给<tr>一行添加背景图。

表格中边框的显示 

显示所有 4 个边框 <table frame=box>

只显示上边框 <table frame=above>

只显示下边框 <table frame=below>

只显示上、下边框 <table frame=hsides>

只显示左、右边框 <table frame=vsides>

只显示左边框 <table frame=lhs>

只显示右边框 <table frame=rhs>

不显示任何边框 <table frame=void>

表格中分隔线(Rules)的显示

显示所有分隔线 <table rules=all>

只显示组(Groups)与组之间的分隔线 <table rules=groups>

只显示行与行之间的分隔线 <table rules=rows>

只显示列与列之间的分隔线 <table rules=cols>

不显示任何分隔线 <table rules=none>

<thead> ... </thead> - 表的题头(Header)  <tbody> ... </tbody> - 表的正文(Body)  <tfoot> ... </tfoot> - 表的脚注(Footer)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-06-06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • <table>
    • 表格的标题
      • <caption align=# valign=#> ... </caption>
    • 表格中边框的显示 
      • 显示所有 4 个边框 <table frame=box>
      • 只显示上边框 <table frame=above>
      • 只显示下边框 <table frame=below>
      • 只显示上、下边框 <table frame=hsides>
      • 只显示左、右边框 <table frame=vsides>
      • 只显示左边框 <table frame=lhs>
      • 只显示右边框 <table frame=rhs>
      • 不显示任何边框 <table frame=void>
    • 表格中分隔线(Rules)的显示
      • 显示所有分隔线 <table rules=all>
      • 只显示组(Groups)与组之间的分隔线 <table rules=groups>
      • 只显示行与行之间的分隔线 <table rules=rows>
      • 只显示列与列之间的分隔线 <table rules=cols>
      • 不显示任何分隔线 <table rules=none>
      • <thead> ... </thead> - 表的题头(Header)  <tbody> ... </tbody> - 表的正文(Body)  <tfoot> ... </tfoot> - 表的脚注(Footer)
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档