我写个html的表格,为什么没有对齐

我写个html的表格,为什么没有对齐,第1张

<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">&nbsp;</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 用于标识单独的唯一的元素。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/12186946.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存