Правильный способ назначения элементов таблицы в CSS и HTML - PullRequest
Новая
       57

Правильный способ назначения элементов таблицы в CSS и HTML

0 голосов
/ 27 сентября 2018

Я не могу понять, насколько это было сложно.Я сделал такой хеш из этого маленького столика, что наконец сдался.Ниже приведен скриншот того, что я пытаюсь создать, и после этого мой код:

enter image description here

СИНИЙ и ЖЕЛТЫЙ ячейки (IPSO и FACTO ) образуют две маленькие цветные полоски высотой 16 пикселей, которые являются своего рода «мини-заголовками» для ROW 5: это единственные элементы в таблице, у которых нет текста только их цвета фона;ряд, который они занимают, не имеет ничего с обеих сторон;они наследуют свою ширину от столбцов 4 и 5 соответственно;они не должны иметь подкладки;и хотя остальная часть таблицы может иметь переменные размеры шрифта, эти два всегда будут иметь высоту 16 пикселей.

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>
...