网页设计与制作(初级).ppt

设置第一个单元格边框为红色 table border=20 align=center cellpadding=10 cellspacing=10 bordercolor=#0099FF tr td bordercolor=#FF0000row 1, cell 1/td tdrow 1, cell 2/td /tr tr tdrow 2, cell 1/td tdrow 2, cell 2/td /tr /table IE的显示 Firefox的显示 设置第一行单元格背景色为蓝色 tr td bgcolor=#99CCFFrow 1, cell 1/td td bgcolor=#99CCFFrow 1, cell 2/td /tr 等价于： tr bgcolor=#99CCFF tdrow 1, cell 1/td tdrow 1, cell 2/td /tr 设置所有单元格背景色为蓝色 tr td bgcolor=#99CCFFrow 1, cell 1/td td bgcolor=#99CCFFrow 1, cell 2/td /tr tr td bgcolor=#99CCFFrow 1, cell 1/td td bgcolor=#99CCFFrow 1, cell 2/td /tr 等价于 tbody bgcolor=#99CCFF tr…/trtr…/tr /tbody 再设置表格的背景色为红色 再设置表格的边框border为0 实现1象素边框表格 此时将表格的间距cellspacing设为1，即实现1象素边框表格， 其原理是通过把表格的背景色和（所有单元格的背景色）调整成不同的颜色，使间距看起来象一个边框一样 所有单元格的背景色设为同一颜色后，我们也称为表格的前景色 用CSS属性border-collapse做1象素边框的表格 在默认情况下表格边框和单元格边框是不叠加的，此时表格的边框和单元格的边框紧挨在一起，所以边框的宽度为1＋1＝2象素，这是border-collapse属性的默认值为separate，即不重叠时的情况。当我们把border-collapse属性值设为collapse（重叠）时，表格边框和单元格边框将发生重叠，则边框的宽度为1象素。 border-collapse:collapse; table border=1 bordercolor=#FF0000 style=border-collapse:collapse; 双细线边框表格的原理 将表格的边框颜色bordercolor属性设置为某种颜色，则表格的暗边框和亮边框会变为同一种颜色，表格的边框立体效果消失，（在IE中单元格边框的颜色也会跟着改变，而Firefox中单元格边框颜色不会改变）此时表格的边框和单元格的边框都为1象素，只要间距cellspacing不设为0，则两组边框不会重合，显示为双细线边框表格。 双细线边框表格的实现 table border=1 cellpadding=10 cellspacing=2 bordercolor=#0099FF tr bgcolor=#99CCFF tdrow 1, cell 1/td tdrow 1, cell 2/td /tr tr tdrow 1, cell 1/td tdrow 1, cell 2/td /tr /table IE的显示 例2 下面的表格是如何实现的 用间距做的边框，但并没有把表格的边框border设为0 ，而是设为1，白色。因此在红色“边框”的外面还有1象素白色的表格边框，单元格外也有1象素的白色单元格边框 表格间距为1，表格背景色为红色，单元格背景色为淡红色 单元格内容的对齐属性align/valign align属性可以让单元格中的内容是水平居中或左右对齐，默认是左对齐 valign属性是垂直对齐属性，可以让内容在垂直方向对齐，默认是垂直居中对齐 单元格的合并属性（colspan、rowspan） 单元格的合并属性是td标记特有的两个属性，分别是跨多列属性colspan和跨多行属性rowspan，它们用于合并列或合并单元格。如： td colspan=3 单元格内容 /td 表示该单元格是由3列（3个并排的单元格）合并而成，它将使该行tr标记中减少两个td标记。 td rowspan=3单元格内容/td 表示该单元格由3行（3个上下排列的单元格）合并而成，它将使该行下的两行，两个tr标记中分别减少一个td标记。 注意：colspan和rowspan属性也可以在一个单元格td标记中同时出现，如： td colspan=3