Вопрос по таблицам в HTML

Аватара пользователя
Sid
Сообщения: 12
Зарегистрирован: 12 мар 2010
итак, проблема такая: делаю таблицу из 3х столбцов, и 16 строк, заполняю, но возникают проблемы с расположением текста в таблице, а еще, я заливаю допустим верхнюю строку полностью черным, но она получается не целая а разбитая на 3 кусочка границами ячеек, а мне это не нужно, скриншот желаемого результата выложу внизу, а далее напишу кусочек кода своей таблицы, может там где то ошибка.

Код: Выделить всё

<table border="0" align="center">
   <caption><strong>Треклист</strong></caption>
   <tbody>
      <tr align="center" valign="middle">
         <td style="background-color: #000000"><strong><font class="Apple-style-span" color="#CF5329"> №</font></strong> </td>
         <td align="center" valign="middle" style="background-color: #000000"><span style="font-family: sans-serif; font-size: 13px; border-collapse: collapse; font-weight: bold; line-height: 19px" class="Apple-style-span"><font class="Apple-style-span" color="#CF5329">Название</font></span></td>
         <td style="background-color: #000000"><span style="font-family: sans-serif; font-size: 13px; border-collapse: collapse; font-weight: bold; line-height: 19px" class="Apple-style-span"><font class="Apple-style-span" color="#CF5329"><span style="white-space: pre" class="Apple-tab-span">     </span>Длительность</font></span> </td>
      </tr>
      <tr valign="middle">
         <td style="background-color: #141414">  <font class="Apple-style-span" color="#FFFFFF">1</font></td>
         <td style="background-color: #141414"><span style="font-family: sans-serif; font-size: 13px; border-collapse: collapse; line-height: 19px" class="Apple-style-span"><font class="Apple-style-span" color="#FFFFFF"><span style="white-space: pre" class="Apple-tab-span"> </span> «The Requiem»</font></span><span style="white-space: pre" class="Apple-tab-span">    </span></td>
      </tr>
   </tbody>
</
table> 
Возможно один из <td> или <tr> я пропустил тут, т.к. кусочек вырвал из общего кода, но суть я думаю вам понятна.

а теперь скрин:
скрин.JPG
Слева то что сейчас, справа аналог того что я хочу сделать

Аватара пользователя
Distructor
Администратор
Сообщения: 1600
Зарегистрирован: 28 дек 2009
За отступы между ячейками отвечает свойство cellspacing, а за отступы внутри ячейки cellpadding тега <table>. Соответственно для того чтобы при заливке идущих подряд ячеек между ними не оставались пробелы необходимо установить значение cellspacing в 0.

Также неплохо почитать учебники HTML и CSS, и не пользоваться визуальными редакторами добавляющими в код столько мусора. Если убрать мусор, немного поправить код и использовать CSS-классы, то получится намного читаемее и правильнее:

Код: Выделить всё

<style type="text/css">
   .tracks_table {
      table-layout: fixed;
      font-weight:bold;
      font-family: sans-serif; 
      font
-size: 13px;
   }
   .tracks_table .row_head {
      background-color: #000000;
      color: #CF5329;
      vertical-align:middle;
      border-bottom:1px solid #646464;
   }
   .tracks_table .row1 {
      background-color: #141414;
      color: #FFFFFF;
      vertical-align:middle;
      border-bottom:1px solid #646464;
   }
   .tracks_table .row2 {
      background-color: #343434;
      color: #FFFFFF;
      vertical-align:middle;
      border-bottom:1px solid #646464;
   }
</
style>

<
table border="0" cellspacing="0" cellpadding="3">
   <caption><strong>Треклист</strong></caption>
   <col width="75" align="right" /><col align="left" /><col width="75" align="center" />
   <tbody>
      <tr>
         <td class="row_head"></td>
         <td class="row_head">Название</td>
         <td class="row_head">Длительность</td>
      </tr>
      <tr>
         <td class="row1">1</td>
         <td class="row1">«The Requiem»</td>
         <td class="row1">&nbsp;</td>
      </tr>
      <tr>
         <td class="row2">1</td>
         <td class="row2">«Fallout»</td>
         <td class="row2">«Fallout»</td>
      </tr>
      <tr>
         <td class="row1">3</td>
         <td class="row1">«The Requiem»</td>
         <td class="row1">&nbsp;</td>
      </tr>
   </tbody>
</
table> 

также в код добавлена фиксированная ширина для первой колонки, 2 класса для чередования цвета фона строк и нижняя граница у ячеек. В результате получили:
Screenshot.png


Вернуться в «Вопросы по веб-дизайну и верстке»