Question

我无法克服这个困难。我对这张小桌子做了这样的哈希，最后我放弃了。以下是我要创建的屏幕截图，以及之后的代码：

BLUE和YELLOW单元格（ IPSO 和 FACTO ）形成了两个高度为16像素的小色带，它们是ROW 5的“迷你标头”：是表格中唯一没有文字，只是背景颜色的元素；他们占据的那一行在两边都没有东西。它们分别从第4列和第5列继承宽度；他们应该没有填充；尽管表格的其余部分可以具有可变的字体大小，但这两个字体的高度始终为16px。

ROW 5用作标准行，但 JOINED 跨越以绿色显示的两列。

您可以看到我为使文本垂直对齐底部所做的努力。

我为代码太粗糙表示歉意。我看不到它，网上也看不到很多例子（您可以说我是新手）。谢谢您的帮助！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>FLOATIN&rsquo; &amp; COLSPAN</title>
      <style type="TEXT/CSS">
         body {
         font-size: 12px;
         line-height: 13px;
         font-family: LUCIDA CONSOLE, Bold, MONOSPACE;
         margin-left: 50px;
         margin-right: 50px;
         margin-top: 50px;
         margin-bottom: 10px;
         }
         TABLE, TH, TD {
         font-size: 12px;
         line-height: 13px;
         font-family: LUCIDA CONSOLE, Bold, MONOSPACE;
         border: 1px solid #A569BD;
         border-collapse: collapse;
         padding: 4px;
         vertical-align: BOTTOM;
         }
         .IPSO {
         colspan: 3;
         rowspan: 2;
         float: LEFT;
         HEIGHT: 16px;
         background-color: DODGERBLUE;
         }
         .FACTO {
         colspan: 3;
         rowspan: 2;
         float: RIGHT;
         HEIGHT: 16px;
         background-color: YELLOW;
         }
         .JOINED {
         colspan: 3;
         rowspan: 1;
         HEIGHT: AUTO;
         background-color: #99FF99;
         }
         .GHOST {
         text-align: CENTER;
         font-size: 7px;
         font-color: #A0A0A0;
         colspan: 3;
         rowspan: 1;
         HEIGHT: 10px;
         }
      </style>
   </head>
   <body>
      <table style="valign: BOTTOM; text-align: left; width: 500px; height: AUTO;" border="1" cellpadding="AUTO" cellspacing="AUTO">
         <tbody>
            <tr>
               <td>HD1</td>
               <td>HD2</td>
               <td>HD3</td>
               <td>HD4</td>
               <td>HD5</td>
               <td>HD6</td>
               <td>HD7</td>
               <td>HD8</td>
            </tr>
            <tr>
               <td>ROW 1</td>
               <td>1-2</td>
               <td>1-3</td>
               <td>1-4</td>
               <td>1-5</td>
               <td>1-6</td>
               <td>1-7</td>
               <td>1-8</td>
            </tr>
            <tr>
               <td>ROW 2</td>
               <td>2-2</td>
               <td>2-3</td>
               <td>2-4</td>
               <td>2-5</td>
               <td>2-6</td>
               <td>2-7</td>
               <td>2-8</td>
            </tr>
            <tr>
               <td>ROW 3</td>
               <td>3-2</td>
               <td>3-3</td>
               <td>3-4</td>
               <td>3-5</td>
               <td>3-6</td>
               <td>3-7</td>
               <td>3-8</td>
            </tr>
            <tr>
               <td colspan="3" rowspan="1" valign="BOTTOM" text-align="CENTER" <span style="color: #A0A0A0;">◄ Would be Row 4 ▶</span></td>
               <td bgcolor="DODGERBLUE" valign="BOTTOM">IPSO</td>
               <td bgcolor="YELLOW" valign="BOTTOM">FACTO</td>
               <td colspan="3" rowspan="1" valign="BOTTOM"> <span style="color: #A0A0A0;">◄ Would be Row 4 ▶</span></td>
            </tr>
            <tr>
               <td>ROW 5</td>
               <td>5-2</td>
               <td>5-3</td>
               <td colspan="2" rowspan="1" align="center" bgcolor="#99FF99">JOINED</td>
               <td>5-6</td>
               <td>5-7</td>
               <td>5-8</td>
            </tr>
            <tr>
               <td>ROW 6</td>
               <td>6-2</td>
               <td>6-3</td>
               <td>6-4</td>
               <td>6-5</td>
               <td>6-6</td>
               <td>6-7</td>
               <td>6-8</td>
            </tr>
            <tr>
               <td>ROW 7</td>
               <td>7-2</td>
               <td>7-3</td>
               <td>7-4</td>
               <td>7-5</td>
               <td>7-6</td>
               <td>7-7</td>
               <td>7-8</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

在CSS和HTML中分配表格元素的正确方法

0 个答案: