В данной статье я ещё немного расскажу о некоторых атрибутах, которые используются при создании таблиц в HTML.
При создании таблиц в HTML вам понадобятся такие атрибуты как: colspan и rowspan.
Colspan — это сокращение от «column span/охват столбцов». Colspan используется в тэге <td> для спецификации того, сколько столбцов охватывает данная ячейка:
Например,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <table border="1" width="50%"> <tr> <td colspan="4">Клетка 1</td> </tr> <tr> <td>Клетка 2</td> <td>Клетка 3</td> <td>Клетка 4</td> <td>Клетка 5</td> </tr> </table> </html> |
| Клетка 1 | |||
| Клетка 2 | Клетка 3 | Клетка 4 | Клетка 5 |
При установке costpan «4», мы заставляем ячейку в первом ряду охватить 4 столбца. Если же мы присвоим costpan «3», то она охватит только 3 столбца, и понадобится вставить дополнительные ячейки в первом ряду, для того чтобы ячейки ровно распределились на два ряда.
Например,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <table border="1" width="50%"> <tr> <td colspan="3">Клетка 1</td> <td>Клетка 2</td> </tr> <tr> <td>Клетка 3</td> <td>Клетка 4</td> <td>Клетка 5</td> <td>Клетка 6</td> </tr> </table> </html> |
| Клетка 1 | Клетка 2 | ||
| Клетка 3 | Клетка 4 | Клетка 5 | Клетка 6 |
Вы наверное уже догадались, что rowspan используют для обединения рядов.
Например,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html> <table border="1" width="50%"> <tr> <td rowspan="3">Клетка 1</td> <td>Клетка 2</td> <td>Клетка 3</td> <td>Клетка 4</td> </tr> <tr> <td>Клетка 5</td> <td>Клетка 6</td> <td>Клетка 7</td> </tr> <tr> <td>Клетка 8</td> <td>Клетка 9</td> <td>Клетка 10</td> </tr> </table> </html> |
| Клетка 1 | Клетка 2 | Клетка 3 | Клетка 4 |
| Клетка 5 | Клетка 6 | Клетка 7 | |
| Клетка 8 | Клетка 9 | Клетка 10 |
В данном примере rowspan присвоено значение 3 в ячейке Клетка 1. Это указывает, что ячейка должна охватывать 3 ряда включая свой. При этом в первом ряду на одну ячейку больше чем в других рядах.