Объединяем ячейки

Для объединения ячеек по горизонтали и вертикали используются атрибуты colspan и rowspan
COLSPAN - определяет число столбцов, объединяемых одной ячейкой.
ROWSPAN - определяет число строк, объединяемых одной ячейкой.
В качестве примера берем таблицу которую мы создали на предыдущей страницы.

1х1 1х2 1х3
2х1

2х2

2х3
3х1
3х2
3х3
4х1 4х2 4х3

Задача заключается в том, что нужно объединить ячейки 1х1, 1х2, 1х3 к примеру для создания меню сайта и объединить ячейки 2х3, 3х3, 4х3 для размещения чего либо.

  1. <table border="3" width="400" height="200">
2. <tr bgcolor="#CCCCFF" align="center">
3. <td colspan="3"> 1х1 </td>
4. <td> 1х2 </td>
5. <td> 1х3 </td>
6. </tr>
7. <tr>
8. <td bgcolor="#CCFFCC"> <div align="Center"> 2х1 </div> </td>
9. <td> <p align="Center"> 2х2 </p> </td>
10. <td bgcolor="#FFCCFF" rowspan="3"> <div align="Center"> 2х3 </div> </td>
11. </tr>
12. <tr>
13. <td bgcolor="#FFCCFF"> <center> 3х1 </center> </td>
14. <td> <center> 3х2 </center> </td>
15. <td bgcolor="#CCFFCC"> <center> 3х3 </center> </td>
16. </tr>
17. <tr bgcolor="#00FFFF">
18. <td align="center"> 4х1 </td>
19. <td align="center"> 4х2 </td>
20. <td align="center"> 4х3 </td>
21. </tr>
22. </table>

Как видно из выше изложенной записи атрибут colspan прописан для ячейки 1х1 со значением три, это говорит о том, что ячейка 1х1 объединит три столбца. А ячейки 1х2 и 1х3 (в примере они перечеркнуты) должны быть удалены из записи, так как ячейка 1х1 будет занимать их место.
Атрибут rowspan прописан для ячейки 2х3 имеет значение три, это значит, что ячейка 2х3 объединит три строки одной ячейкой. Ячейки 3х3 и 4х3 (в примере они тоже перечеркнуты) должны быть удалены, их место займет ячейка 2х3.

Получается следующая запись:

  <table border="3" width="400" height="200">
<tr bgcolor="#CCCCFF" align="center">
<td colspan="3"> 1х1 </td>
</tr>
<tr>
<td bgcolor="#CCFFCC"> <div align="Center"> 2х1 </div> </td>
<td> <p align="Center"> 2х2 </p> </td>
<td bgcolor="#FFCCFF" rowspan="3"> <div align="Center"> 2х3 </div> </td>
</tr>
<tr>
<td bgcolor="#FFCCFF"> <center> 3х1 </center> </td>
<td> <center> 3х2 </center> </td>
</tr>
<tr bgcolor="#00FFFF">
<td align="center"> 4х1 </td>
<td align="center"> 4х2 </td>
</tr>
</table>

И если запись будет сделана верно, в итоге должна получиться такая вот таблица:

1х1
2х1

2х2

2х3
3х1
3х2
4х1 4х2

Употребление этих атрибутов требует небольшой тренировки, чтобы понять, сколько столбцов и строк нужно оставить при объединении, а сколько убрать.
Для тренировки попробуйте сделать простенькую таблицу к примеру 2 на 3, пронумеруйте ячейки и попробуйте самостоятельно поэкспериментировать.



Вернуться назад Перейти к следующей странице



2009 - 2018г. andron09_73@mail.ru
  кофеварки по турецки лучшее   доставка цветов майкоп ссылка   Изготовление печатей / штампов