第3章1html标记重点.ppt

在Dreamweaver中选中表格的方法 选择整个表格：单击表格左上角或右边框或底边框或状态条中的table标签。 选择一行或一列单元格：将鼠标指针置于一行的左边框上，或置于一列的顶端边框上，当选定箭头出现时单击，或状态条中的tr标签（推荐）。 选择连续的几个单元格：在一个单元格中单击并拖动鼠标横向或纵向移至另一单元格。 选择不连续的几个单元格：按住Ctrl键，单击欲选定的单元格、行或列。 选择单元格中的网页元素：点击单元格中的网页元素。 DW在表格中插入行或列的方法 当光标位于表格内时，按右键在弹出菜单中选择“表格——插入行（或插入列）”可在表格的当前行的上方插入一行，或当前行的左边插入一列，若要在表格的最右边插入一列或最下方插入一行，可选择“表格——插入行或列…”，在所选列之后或所选行之下插入列或行。插入行也可以在代码视图中复制一行的代码“tr……/tr”再粘贴几次就插入几行，插入列则在代码视图中不好进行。 制作固定宽度的表格 如果我们不定义表格中每个单元格的宽度，当向单元格中插入网页元素时，表格往往会变形，要制作固定宽度的表格，通常有两种方法： ① 定义所有列的宽度，但不定义整个表格的宽度，整个表格的实际宽度为：所有列的宽度和+边框宽度和+间距和+填充和，这时候，只要单元格内的内容不超过的单元格的宽度时，表格不会变形。 ② 定义整个表格的宽，如500像素、98%等，再留一列的宽度不定义，未定义的这一列的宽度为整个表格的宽度-已定义列的宽度和-边框宽度和-间距和-填充和，同样在插入内容时也不会变形。 用单元格制作水平线或占位表格 关键：去掉单元格td中的“nbsp;”空格 table width=200 border=0 cellpadding=0 cellspacing=0 tr td height=1 bgcolor=#FF00FF/td !-- 单元格中的“nbsp;”已去掉-- /tr /table 制作占位表格：演示 用表格制作圆角栏目框 网页中经常可以看到漂亮的圆角栏目框，在这里我们来制作一个固定宽度的圆角栏目框 圆角栏目框制作步骤 1. 插入一个三行一列的表格，把表格的填充、间距和边框设为0，宽设置成190象素（圆角图片的宽），高不设置。 2. 分别设置表格内三个单元格的高。第一个单元格高设置为38象素（上圆角图片的高）；第二个单元格高为148象素；第三个单元格高为17象素（下圆角图片的高）。在第1、3个单元格内分别插入上圆角和下圆角的图片。 3. 把第二个单元格的水平对齐方式设置为居中（align=center），单元格的背景颜色设置为圆角图片边框的颜色（bgcolor=#E78BB2）。 4. 这时在第二个单元格内再插入一个一行一列的表格，把该表格的间距和边框设为0，填充设为8象素（让栏目框中的内容和边框之间有一些间隔），宽设为186象素，背景颜色设置为比边框浅的颜色（bgcolor=#FAE4E6）。 说明：第四步也可以不插入表格，而是把第二个单元格拆分成3列，把三列对应的三个单元格的宽分别设置为2象素、186象素和2象素，并在代码视图把这三个单元格中的“nbsp;”去掉，然后把1、3列的背景色设置为圆角边框的颜色，第2列的背景色设为圆角背景的颜色，并用CSS属性设置它的填充为8象素（style=padding:8px） 表格标记 表格的主要作用：网页布局 因为表格可以固定文本或图像的显示位置，还可以使用多重表格，并可以设置前景色和背景色 网页中的表格是由table标记定义的，一个表格被分成许多行tr，每行又被分成许多个单元格td，因此table、tr、td是表格中三个最基本的标记，必须一起出现。表格中的单元格能容纳网页中的任何元素，如图像，文本，列表，表单，表格等。 The elements that make up the basic structure of a table 下面这段代码在浏览器中如何显示 table border=1 tr tdrow 1, cell 1/td tdrow 1, cell 2/td /tr tr tdrow 2, cell 1/td tdrow 2, cell 2/td /tr /table 表格标记table的常见属性 table的属性 含义 border 表格边框的宽度 bordercolor 表格边框的颜色，若不设置，将显示立体边框效果 bordercolordark bordercolorlight 设置边框暗部分和明亮部分效果，IE才支持这两个属性 bgcolor 表格的背景色 background 表格的背景图像 cellspacing 表格的间距 cellpadding