-
Sid
итак, проблема такая: делаю таблицу из 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> я пропустил тут, т.к. кусочек вырвал из общего кода, но суть я думаю вам понятна.
а теперь скрин:
- Слева то что сейчас, справа аналог того что я хочу сделать
-
Distructor
- Администратор
За отступы между ячейками отвечает свойство
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"> </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"> </td>
</tr>
</tbody>
</table>
также в код добавлена фиксированная ширина для первой колонки, 2 класса для чередования цвета фона строк и нижняя граница у ячеек. В результате получили: