HTML复杂表格

我想;1.移走这张桌子的一小部分，在那里腾出空间。我在代码上做了注释。
2.还可以将表格中的单词居中。有谁能帮我一下吗?(请只使用HTML，不要使用css或javascript)

  <html>
    <head>
    <title>My First Webpage</title>
    </head>
    <body >
    <table border="1px" width="80%" cellspacing="0" cellpading="0" > 
    <tr>
    <td ></td>        <! -- I NEED TO REMOVE THIS PART FROM TABLE AND MAKE A **FREE SPACE** HEARE -->
    <td >9-11</td>
    <td >11-13</td>
    <td >13-15</td>
    <td >15-17</td>
    </tr>
    <tr>
    <td >Monday</td>  
    <td>6</td>
    <td colspan="0">7</td>
    <td rowspan ="3">Lunch</td>
    <td>a</td>
    </tr>
    <tr>
    <td>Tuesday</td>  
    <td colspan="2">&#60; free</td>
    <td>s</td>
    </tr>
    <tr>
    <td >Wedensday</td>
    <td>a</td>
    <td>s</td>
    <td>5</td>
    </tr>
    </table>
    </body>
    </html>

使用CSS居中是最好的做法。你可以这样做:

<table style="text-align:center">

但是你也可以在每个单元格中使用HTML，像这样:

<td align="center">Text</td>

或者像这样:

<td><center>Text</center></td>

表格并不意味着跳过单元格，所以不同的浏览器会以不同的方式处理它。你不会得到一致的结果。但是，根据您需要空格的目的，您可以使用一些变通方法。

如果你只是想让单元格为空，在里面放一个空格，像这样:

<td>&nbsp;</td>

一些浏览器对空标签感到困惑，但是添加一个粘性空间(它显示为一个空格-你看不到它)可以解决这个问题。

如果你想让单元格没有背景/边框，让它看起来不存在:

<td style="background:none; border:none">

这是嵌入的CSS，我把它包括进来，因为HTML版本已经过时了，你应该用CSS来代替，但这里是HTML:

<td bgcolor="#000000" border=0>

必须将#000000替换为桌子后面的颜色。如果桌子后面有图像或文本，您可以使用透明图像作为背景。(如果你可以用style="background:none"代替，我不建议你这么麻烦。)

你可以让你要删除的单元格后面的单元格跨出它们的空间:

<td colspan=2>9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>

另一种解决方案是将表放在表中。

<table border="1px" width="80%" cellspacing="0" cellpading="0" >
    <tr>
        <td align="right"> <!-- The content is aligned to the right so that the blank space will be on the left. -->
            <table width="80%"> <!-- The width of four out of five cells is 80% of the total width -->
                <tr>
                    <td >9-11</td>
                    <td >11-13</td>
                    <td >13-15</td>
                    <td >15-17</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td >Monday</td>  
        <td>6</td>
        <td colspan="0">7</td>
        <td rowspan ="3">Lunch</td>
        <td>a</td>
    </tr>
    <tr>
        <td>Tuesday</td>  
        <td colspan="2">&#60; free</td>
        <td>s</td>
    </tr>
    <tr>
        <td >Wedensday</td>
        <td>a</td>
        <td>s</td>
        <td>5</td>
    </tr>
</table>

正如你所看到的，有很多不同的方法来解决这个问题。HTML为实验和创造留下了很大的空间。

jF: http://jsfiddle.net/theStudent/b9tGV/1/

我会说你必须使用一些CSS，这将是最专业的方式去做它。

我已经开始了，所以你可以看到上面的链接是如何工作的，它很简单，网上有很多教程和样本，只要做一点研究。

我开始给你的样本很简单，需要更多的工作。

祝你好运我相信这是一个好的开始

HTML

我的第一个网页

<body >
<table width="80%" cellspacing="0" cellpading="0" > 
<tr>
<td class="no-border"></td>        <! -- I NEED TO REMOVE THIS PART FROM TABLE AND MAKE A **FREE SPACE** HEARE -->
<td class="border">9-11</td>
<td class="border">11-13</td>
<td class="border">13-15</td>
<td class="border">15-17</td>
</tr>
<tr>
<td class="border">Monday</td>  
<td>6</td>
<td colspan="0" class="border">7</td>
<td rowspan ="3" class="border">Lunch</td>
<td class="border">a</td>
</tr>
<tr>
<td class="border">Tuesday</td>  
<td class="border" colspan="2">&#60; free</td>
<td class="border">s</td>
</tr>
<tr>
<td class="border">Wedensday</td>
<td class="border">a</td>
<td class="border">s</td>
<td class="border">5</td>
</tr>
</table>
</body>
</html>

CSS

.no-border{
    border: none;
}
.border{
    border: 1px solid #000;
    text-align:center;
}

相关内容

最新更新

热门标签：