宁波esball.net设计:表格的设计应用

发布时间:2018-09-22 22:59

  表格的设计应用
  表格常识
  表格,又称为表,既是一种可视化的交流模式,又是一种组织整理数据的手段。人们在通信交流、科学研究以及数据分析活动当中广泛采用形形色色的表格。各种表格常常出现于印刷介质、手写记录、计算机软件、建筑装饰、交通标志等。随着上下文的不同,用来确切描述表格的惯例和术语也会有所变化。此外,在种类、结构、灵活性、标注法、表达方法以及使用方面,不同的表格有很大差异。
  在网页中,表格是由一个或多个单元格构成的集合,表格中横向的多个单元格称为”行“(在HTML语言中以<tr>标签开始,以</tr>标签结束),垂直的多个单元格称为”列“(以<td>标签开始,以</td>标签结束),行与列的交叉区域称为单元格,网页中的元素就放置在这些单元格中。
  在网页中,表格如实际所示。
  值得一提的是,在网页的设计中,表格不仅可以用来归纳放置文本、图片、多媒体等信息,更被广泛用于页面排版。
  创建表格

宁波esball.net设计:表格的设计应用的图片229

宁波esball.net设计:表格的设计应用的图片223

  利用可视化工具创建表格
  通过Dreamweaver可以方便地进行表格的插人操作,方法如下:
  第一步:将当前文档切换到”设计视图“窗口。
  第二步:单击菜单栏的”插人记录“,再选择”表格“命令(或者按快捷键”Ctrl+Alt+T“)。
  第三步:接下来弹出一个表格设置窗口,宁波esball.net设计可以通过它设置待插人的表格。
  实际设置待插入表格
  第四步:单击”确认“按钮,即可在页面中生成相应的表格。
  在插人的表格外层,会有与列对应的标绿色小三角箭头的线,还有绿色的标着数字的线。这是分别用来动态显示每列的列宽和整个表格总宽的数字标注。绿色小三角表示此处单元格尚未标注具体的宽度数字。当有具体数字时,则显示具体的数字。
  通过这些线条和数字,可以很精准地控制表格的式样。
  利用标签创建表格
  在HTML文档中,也可以利用标签来创建表格。

宁波esball.net设计:表格的设计应用的图片225

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

宁波esball.net设计:表格的设计应用的图片220

  说明:
  在HTML文档中,创建表格使用的基本标签有<table>〈/table>、<tr〉</tr〉、<td></td>^q<th></th>等。这些标签的具体含义及用法见实际。
  实际创建表格使用的基本标签
  标签说明

宁波esball.net设计:表格的设计应用的图片226

  定义一个表格,成对出现
  定义表格中的一行,成对出现,嵌套在<table>标签内定义表格中的一列,成对出现,嵌套在<tr>标签内定义表头单元格,成对出现,嵌套在<1!>标签内,文本黑体居中实例代码如下:<html>
  每个表格由table标签开始。

每个表格行由tr标签开始。

每个表格数据由td标签开始。


  
  —行三列:
  
  两行三列:
  
  其执行结果如实际所示。
  每个表格由table标签开始。每个表格行由打标签开始。每个表格数据由td标签开始一列:

宁波esball.net设计:表格的设计应用的图片218

  实际执行结果
  编辑表格
  利用可视化工具编辑表格
  通过Dreamweaver可以方便地进行表格的编辑操作。

宁波esball.net设计:表格的设计应用的图片224

  选择表格
  在可视化界面上,选择表格主要有以下几种方法:
  将鼠标光标移至单元格边框线上,当鼠标光标变为+或Hh形状时单击鼠标左键。
  将鼠标光标移至表格外框线上,当鼠标光标变为形状时,单击鼠标左键。
  在表格内部任意单元格中单击鼠标左键,然后在标签选择器中单击对应的<table>标签。

宁波esball.net设计:表格的设计应用的图片219

  将插人点置于表格的任意单元格中,表格上方或下方将显示绿线标志,单击最上方或最下方标有表格宽度的绿线中的小三角,在弹出的下拉菜单中选择”选择表格“命令。
  选择行或列
  要选择某行或某列,可将光标置于该行左侧或该列顶部,当光标形状变为黑色箭头或443寸单击鼠标左键,即可选中相应的行或列。
  实际通过标签按钮选中表格
  浯除所有高度(X〕濱除所有宽度

宁波esball.net设计:表格的设计应用的图片216

  使所有宽度一致側〕隐藏表格宽度CT)
  选择单元格
  在Dreamweaver中可以选择单个单元格,也可以选择连续的多个单元格或不连续的多个单元格。
  要选择某个单元格,可先将插人点置于该单元格内,然后按”Ctrl+A“组合键或单击”标签选择器“中对应的<1(1>标签。
  要选择连续的单元格,应首先在要选择的单元格区域的左上角单元格中单击,然后按住鼠标左键向右下角单元格方向拖动鼠标,最后松开鼠标左键。
  如果希望选择一组不相邻的单元格,可按住Ctrl键单击选择各单元格。

宁波esball.net设计:表格的设计应用的图片230

宁波esball.net设计:表格的设计应用的图片221

  设置表格属性
  选中表格后,可利用下方的”属性“面板査看或修改表格的行、列、宽,以及填充、间距、背景颜色、背景图像等属性。

宁波esball.net设计:表格的设计应用的图片215

  拆分与合并单元格

宁波esball.net设计:表格的设计应用的图片227

宁波esball.net设计:表格的设计应用的图片217

  在网页制作中,经常会用到一些特殊结构的表格,此时就需要拆分或合并单元格。
  拆分单元格
  拆分单元格就是将一个单元格拆分成多个单元格。其方法如下:
  首先,单击鼠标左键选中拟拆分的单元格,并在”属性“面板中单击拆分按钮。
  其次,在弹出的信息框中选择需要将选中的单元格拆分成行还是列,并注明拆分的行或列的数目。
  实际选择拆分模式

宁波esball.net设计:表格的设计应用的图片222

  最后,工具会帮助拆分出我们想要的表格样子。
  rXttM.?Xtr>gigQ

宁波esball.net设计:表格的设计应用的图片228

  实际拆分效果
  本文转载自
  宁波esball.net设计www.leseo.net
esball.net建设相关拓展:
优秀平面设计esball.net
网页设计_公司esball.net建站_制作网页教程_esball.net设计与制作_1小时快速搭建esball.net(建站基础)
新浪首页
设计一个esball.net多少钱
名人个人esball.net设计欣赏
2018年12个巨大的网页设计趋势
怎样建设一个公司esball.net?
esball.net设计一般包括哪些方面
【esball.net设计】_esball.net设计厂家_esball.net设计批发市场/a>
esball.net设计的八个步骤
esball.net平台设计方案
网页设计(esball.net技术)
关于esball世博
esball世博介绍
esball世博思维
人才招聘
使用条款
隐私保护
RSS订阅
esball.net地图
新闻动态
esball世博观点
行业动态
频道介绍
服务介绍
案例展示
品牌研究
品牌理论
品牌体系
联系我们
400-680-2900
社会媒体
微信公众平台
微信公众平台
<友情连结> 宁波斯博网络科技有限公司/ 宁波易企网络科技有限公司/ 宁波云网网络科技有限公司/ 围子里新闻/ 晋江市财经/