Приднестровская поддержка XOOPS
С помощью тега <td> описываются ячейки таблицы. Тег <td> имеет следующие параметры:
- align и vaiign выполняют те же функции, что и в теге <tr>;
- width и height определяют ширину и высоту ячейки в пикселах или в процентах;
- bgcolor указывает цвет фона ячейки; (1)
- col span задает количество объединяемых ячеек по горизонтали;
- rowspan указывает количество объединяемых ячеек по вертикали.
В качестве примера объединения ячеек возьмем наш первоначальный фрагмент кода (листинг 7) и объединим горизонтально расположенные ячейки 1 и 2 в одну (листинг 8).
Листинг 8. Объединение ячеек по горизонтали
Ячейки 1 и 2 объединены | |
Ячейка 3 | Ячейка 4 |
Итак, мы заменили строку
<td align="center">Ячейка 1</td>
на
<td align="center" colspan="2" >Ячейки 1 и 2 объединены</td>
и при этом строка
<td align="center">Ячейка 2</td>
была удалена.
Теперь объединим вертикально расположенные ячейки 1 и 3 в одну (листинг 9).
Листинг 9. Объединение ячеек по вертикали
Ячейки 1 и 3 oбъeдинeны | Ячейки 2 |
Ячейки 4 |
В этом примере мы заменили строку
<td align="center">Ячейка 1</td>
на
<td align="center" rowspan="2">Ячейки 1 и 3 oбъeдинeны</td>
при этом строка
<td align="center">Ячейка 3</td>
была удалена.
Листинг 10 Сложная таблица.
<table border="l" width="600">
<tbody>
<tr>
<td rowspan="2">Ячейка 01, 11</td>
<td colspan="9">Ячейка 02, 03, 04, 05, 06, 07, 08, 09, 10</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>Ячейка 21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</tbody>
</table>
Ячейка 01, 11 | Ячейка 02, 03, 04, 05, 06, 07, 08, 09, 10 | ||||||||
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | |
Ячейка 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Тег <th> позволяет указать ячейки, которые являются заголовочными. Содержимое таких ячеек выделяется полужирным шрифтом и размещается по центру. Во всем остальном тег <th> аналогичен тегу <td>. Листинг 1.10 демонстрирует возможность выделения ячеек с помощью тега <th>.
Листинг 11. Выделение ячеек таблицы
Марка | Цвет | Год выпуска |
---|---|---|
BA3-2109 | Красный | 2008 |
Москвич-412 | Белый | 1978 |
Отправитель | Нити |
---|
14 пользователь(ей) активно (7 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 14 далее... |