表格及布局——0606上午

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

<!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)

时间: 2024-10-28 23:11:10

表格及布局——0606上午的相关文章

2.4 表格用于布局

表格在网页布局方面起到了举足轻重的作用,表格布局好像已经成为一个标准,随便浏览一些站点,它们大多是用表格布局的.使用表格设计网页布局,可以使网页看上去更加整齐,适用于一般比较正规的网页.网页中的表格是由若干行和列组成,每一行(或者列)又由多个单元格组成,每个单元格中又可以反复地插入表格,以满足网页设计人员的布局需要.表格布局的优势在于它能对不同对象加以处理,而又不用担心不同对象之间的影响.如图1所示,就是一幅完全使用表格进行布局的网页. 图1 使用表格布局的页面 一.如何使用表格进行布局 下面我

web前端_表格table布局,同一列两个&lt;td&gt;之间有间隙解决办法。

同学接了个很简单的网站.结果在布局的时候发现网页头部和网页主体之间差不多有1px的间隙.怎么也去除不了,帮忙看了看,隋记录下来,是这样的,网页头部和主体分别在两个<td>中(使用table布局),贴上简单demo: 效果如下,间隙消失了,最重要的是红色矩形圈起来的那句. 如果去掉红色矩形圈起来的部分,效果如下: web前端_表格table布局,同一列两个<td>之间有间隙解决办法.

利用display属性写出表格的布局样式

demo地址:http://codepen.io/tianzi77/pen/gpBzjy 元素结构: <h1>display构造的table小例子,IE8及以下浏览器不支持本示例</h1> <div class="table"> <h2 class="table-caption">大神榜:</h2> <div class="table-column-group"> <d

Android基础_2 Activity线性布局和表格布局

在activity的布局中,线性布局和表格布局是最简单的,这次分别从线性布局,表格布局以及线性布局和表格混合布局做了实验,实验中只需要编写 相应的xml的代码,java代码不需要更改,因为我们这里只是练习android的界面设计.参考的资料为mars老师的教程. 线性布局: 线性布局就是将各种控件按照行或者列依次进行排列. 其中本实验用到的各控件的属性解释如下: android:layout_weight属性是指不同的控件在activity中占有体积大小的比例. android:paddingL

HTML表格布局实际使用详解

现在,表格<table>一般不再用于网页整体的布局.不过,在面对某些特定的设计,如表单输入.数据呈现时,表格则可能是最恰当的选择. 关于表格的直观印象,就是由多个单元格(cell)整齐排列而成的元素,可以明确看出行(row)和列(column).这可以联想到Excel,由Excel在数据处理和统计上的地位,就可以理解网页中表格的意义. 简单来说,能直观感受到多个元素是以行和列的概念排列时,用表格会让你轻松很多.如caniuse.com中应用表格的例子: 表格布局计算 使用表格很简单,但有时候表

WPF布局

1.布局简介 应用程序界面设计中,合理的元素布局至关重要,它可以方便用户使用,并将信息清晰合理地展现给用户.WPF提供了一套功能强大的工具——面板(Panel),来控制用户界面的布局.你可以使用这些面板控件来排布元素.如果内置布局控件不能满足需要的话,还可以创建自定义的布局元素. 2.面板(Panel) WPF用于布局的面板主要有6个,StackPanel(栈面板).WrapPanel(环绕面板).DockPanel(停靠面板).Canvas(画布).Grid(网格面板)和 UniformGri

css 固定HTML表格的宽度

http://www.cnblogs.com/sese/p/6118030.html *************************** 在网页中插件表格时,就算你有时定义了宽度,默认的也会根据里面内容的来自动拉伸.有时候自动拉伸是好,但是如果你表格里面的内容太长,表格就会拉伸的特别难看. 像下面的表格,正常的显示应该如下: 但是如果里面的数据太长的话,就会错位成下面这个样子: 我们如何保证抽奖时间固定宽度,让它显示一行,后面的奖品也显示一行,超出的部分用省略号表示呢? html部分代码如下

Bootstrap 表格

Bootstrap提供了一个清晰的创建表格的布局 <table>标签:为表格添加基础的样式. <thead>标签:表格标题行的容器元素(<tr>),用来标识表格列. <tbody>标签:表格主题中的表格行的容器元素(<tr>). <tfood>标签:表格底部中的表格行的容器元素(<tr>). <tr>标签 :一组出现在单行上的表格单元格的容器元素(<td> 或 <th>). <td

DHTMLX 前端框架 建立你的一个应用程序 教程(五)--添加一个表格Grid

表格例子 样本如下: 我们这篇介绍的是dhtmlxGrid  组件. 它支持4种数据格式:XML, JSON, CSV, JSArray. 添加表格到布局的单元格中去: 1.使用attachGrid() 方法将表格添加到布局的单元格中去. var layout = new dhtmlXLayoutObject(document.body,"2U"); var contactsGrid = layout.cells("a").attachGrid(); 2.继续添加代