Курс Таблицы и объекты - урок от Wlad007

Wlad007

Модератор
Developer
Регист
14 Сен 2016
Сообщения
245
Симпатии
296
#1
Одна и та же таблица в Объекте HTM и Текстовом объекте может выглядеть по разному.

Основной код таблицы

Код:
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
    <td>Row 2</td>
<td>Row 2</td>
    </tr>
    <tr>
    <td>Row 2</td>
    <td>Row 2</td>
<td>Row 2</td>
    </tr>
    <tr>
    <td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>
</tr>
</table>
Стили для таблицы
Код:
    table {
    width: 100%; /* Ширина таблицы */
border-collapse: collapse !important; /* Отображать только одинарные линии */
    }
    th {
text-align: center !important; /* Выравнивание по центру          background: #005FBF; /* Цвет фона ячеек */
padding: 5px; /* Поля вокруг содержимого ячеек */
border: 1px solid black !important; /* Граница вокруг ячеек */
font: 12px Tahoma;
color: #FFF;
font-weight: bold;
}
td {
    text-align: left !important; /* Выравнивание по левому краю */
    padding: 5px !important; /* Поля вокруг содержимого ячеек */
    border: 1px solid black !important; /* Граница вокруг ячеек */
    font: 10px Tahoma;
    }
    tr:nth-child(2n) {
    background-color: #FFF;
    }
    tr:nth-child(2n+1) {
    background-color: #AAD4FF;
    }

Получаем результат
 
Сверху Снизу