HTML中的表格问题

前两天碰到的问题,现在终于知道毛病出在哪里了,确实是自己没把HTML的各个标签吃透。

简单复述一下问题:希望实现一张2行的表格,其中第1行为2列。

错误html如下:


<table border=”0″>
<tbody>
<tr>
<td>111111111111111111111</td>
<td>111111111111111111111</td>
</tr>
<tr>222222222222222222222222222</tr>
<tr>333333333333333333333333333</tr>
</tbody></table>

效果如下:

222222222222222222222222222333333333333333333333333333
111111111111111111111 111111111111111111111

正确的html应该这么写

<table border=”0″>
<tbody>
<tr>
<td>111111111111111111111</td>
<td>111111111111111111111</td>
</tr>
<tr>
<td colspan=2>222222222222222222222222222</td>
</tr>
<tr>
<td colspan=2>2333333333333333333333333333</td>
</tr>
</tbody></table>

关键在于少了粗体的红字部分代码。每个<tr>标签(表示一行)中必要内嵌<td>标签(表示一列),即使行内只有一列,但光这样是不够的,效果会变成这样:

111111111111111111111 111111111111111111111
222222222222222222222222222
2333333333333333333333333333

也就是说第二、第三行无论多长都会和第一行的第一列等宽。所以这里还需要加上colspan,这个是什么意思的呢?它规定单元格可横跨的列数,colspan=2即意味着单元格可横跨两列,现在全部代码补齐以后,表格就正常了。

111111111111111111111 111111111111111111111
222222222222222222222222222
2333333333333333333333333333

O.K. Well done~

p.s : 更多关于<colspan>的介绍请参见这里,w3school,一个很强大的web技术教程网站。

4 thoughts on “HTML中的表格问题

  1. anonymous

    你具有追根刨底, 打破砂锅问到底的精神!
    我虽然不懂,但是我觉得,
    简单的问题复杂化,吃透弄懂了,也便能将复杂的问题简单化!!!

    Reply
  2. langxue

    tr=table row
    td=table date

    其实了解了这个缩写就很容明白了。tr是规定了“样式”,td里面才是“内容”

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>