<tr>
<td>Blouse red silk<td>
<td>$3995</td>
<td>150</td>
</tr>
你仔细看看 <td>Blouse red silk<td> 是由两个 <td>包裹起来的
这会导致html解析器认为这是两个单元格
正确的是
<td>Blouse red silk</td>
一般这种情况肯定是单元格没有写结束标签,或写错了
<table border=1>
<col width=80>
<col width=80>
<col width=80>
<col width=80>
<col width=80>
<col width=80>
<tr align="center">
<td><img src="fivejpg" width="80" height="50"></td>
<td><img src="twojpg" width="80" height="50"></td>
<td><img src="threejpg" width="80" height="50"></td>
<td><img src="fourgif" width="80" height="50"></td>
<td><img src="onejpg" width="80" height="50"></td>
<td><img src="sixjpg" width="80" height="50"></td>
</tr>
<tr style="word-break:break-all;">
<td><a href="###">aaa</a></td>
<td><a href="###">bbbbbbbbbbbbbbbb</a></td>
<td><a href="###">ccccc</a></td>
<td><a href="###">aaaaa</a></td>
<td><a href="###">ssss</a></td>
<td><a href="###">vvvvvvvvvvvvvvvv</a></td>
</tr>
</table>
valign属于一种特性,现在很多新版本的浏览器都不支持这种特性了,所以你最好不要直接使用类似 valign="top"这种直插式的样式,都是采用CSS进行控制
CSS当中的vertical-align属性
范例代码:
<style>table td {
border: 1px solid #000;
width: 200px;
height: 200px;
}
top {
vertical-align: top;
}
middle {
vertical-align: middle;
}
bottom {
vertical-align: bottom;
}
</style>
<table>
<tr>
<td class="top">上</td>
<td class="middle">中</td>
<td class="bottom">下</td>
</tr>
</table>
话说,这种脱离实际开发的案例、书籍就不要用了,弄本合适的书籍学吧,不然学半天都是已经被淘汰的知识和技术,浪费半天时间,实际开发当中都不会用(包括你上面的align,其实现在也是用CSS的text-align属性控制了)。
Tips:案例中的代码,在table标签的样式控制方面不足够严谨和完善,只是为了保障能够看出代码效果。
以下代码,可以试试,是到达了你要求的效果。思想是:用1个DIV为父容器,包容这两个DIV,左侧的浮动向左。而父容器的长与高由内部两个DIV决定,且要设置为居中。htmlheadstyle
type=text/css!--#right
#left
#all
--/style/headbodydiv
id=all
div
id=left此处显示
id
left
的内容/div
div
id=right此处显示
id
right
的内容/div/div/body/html
可以用CSS设置所有TD的默认对齐
<style>
td{text-align:center;}
</style>
<table border='1' width = '100%'>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
你说的区分行对齐,则需要在指定行上设置
<style>
aleft{text-align:left;}
acenter{text-align:center;}
aright{text-align:right;}
</style>
<table border='1' width = '100%'>
<tr class="aleft"><td>1</td><td>2</td><td>3</td></tr>
<tr class="acenter"><td>1</td><td>2</td><td>3</td></tr>
<tr class="aright"><td>1</td><td>2</td><td>3</td></tr>
</table>
或
<table border='1' width = '100%'>
<tr align = "left"><td>1</td><td>2</td><td>3</td></tr>
<tr align="center"><td>1</td><td>2</td><td>3</td></tr>
<tr align="right"><td>1</td><td>2</td><td>3</td></tr>
</table>
贴出代码, 我帮你看看
width 被你设定,但是你的宽度<Td>的宽度超出, 会变形的
建议用一个表格来完成
<table class="table01" border="1" cellspacing="0" cellpadding="0" bordercolor="#000" ><tr bgcolor="#DFF1FF">
<td width="160" rowspan="2" align="center"> </td>
<td width="450" height="25" colspan="3" align="center">1月</td>
<td width="150" rowspan="2" align="center">总预算</td>
<td width="150" rowspan="2" align="center">总执行</td>
<td width="150" rowspan="2" align="center">总结余</td>
<td width="150" colspan="3" align="center"></td>
</tr>
<tr bgcolor="#DFF1FF">
<td width="150" align="center">预算</td>
<td width="150" align="center">执行</td>
<td width="150" align="center">结余</td>
<td width="150" align="center">预算</td>
<td width="150" align="center">执行</td>
<td width="150" align="center">结余</td>
</tr>
<tr style="font-size:12px" class="trtype">
<td style="font-size:12px" width="160" align="center">这是首列</td>
<td width="150" class="tdtype">这里是数据</td>
<td width="150" class="tdtype">这里是数据</td>
<td width="150" class="tdtype">这里是数据</td>
<td width="150" class="tdtype">这里是数据</td>
<td width="150" class="tdtype">这里是数据</td>
<td width="150" class="tdtype">这里是数据</td>
<td width="150" class="tdtype">这里是数据</td>
<td width="150" class="tdtype">这里是数据</td>
<td width="150" class="tdtype">这里是数据</td>
</tr>
</table>
给输入框和button加上css属性:vertical-align: middle。
DIV元素:是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。DIV标签称为区隔标记。作用:设定字、画、表格等的摆放位置。当你把文字、图象,或其他的放在DIV中,它可称作为“DIVblock”,或“DIVelement”或“CSS-layer”,或干脆叫“layer”。而中文我们把它称作“层次”。
定义
<div> 可定义文档中的分区或节(division/section)。
标签可以把文档分割为独立的、不同的部分。它可以用作严格的 组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记,那么该标签的作用会变得更加有效。
用法
DIV标签应用于 Style Sheet(样式表)方面会更显威力,它最终目的是给设计者另一种组织能力,有 Class、Style、title、ID 等属性。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)