- Заработок без сайта
- Заработок на сайте
- Раскрутка сайта
- Темная раскрутка
- Рефералы
- Лохотроны
- Черный список
- Архив
- Домены
- Таблицы стилей CSS
- Контакты
- Ссылки
- Статьи
- Вводная
- Учимся раскрашивать
- Выравнивание текста
- Заголовки и выделение текста
- Шрифты в Html
- Вставляем картинки
- Картинки и текст в Html
- Текстовые ссылки
- Картинка как ссылка
- Навигационные карты
- Якоря
- Таблицы
- Выравнивание текста в таблицах
- Объединяем ячейки
- Расстояние между ячейками таблицы
- Вложенные таблицы
- Примеры с использованием таблиц
- Фреймы
- Полоса прокрутки во фреймах
- Плавающий фрейм
- Списки в документах Html
- Спецсимволы в документах html
- Линии в документах Html
- МЕТА теги
- Список основных тегов
- Таблица цветов
HTML
Начинающим
Объединяем ячейки
Для объединения ячеек по горизонтали и вертикали используются атрибуты
colspan и rowspan
COLSPAN - определяет число столбцов, объединяемых одной ячейкой.
ROWSPAN - определяет число строк, объединяемых одной ячейкой.
В качестве примера берем таблицу которую мы создали на предыдущей страницы.
| 1х1 | 1х2 | 1х3 |
| 2х1 |
2х2 |
2х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. 5. 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. 16. </tr> 17. <tr bgcolor="#00FFFF"> 18. <td align="center"> 4х1 </td> 19. <td align="center"> 4х2 </td> 20. 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 |
| |
|
|
| 4х1 | 4х2 | |
Употребление этих атрибутов требует небольшой тренировки, чтобы понять,
сколько столбцов и строк нужно оставить при объединении, а сколько убрать.
Для тренировки попробуйте сделать простенькую таблицу к примеру 2 на 3,
пронумеруйте ячейки и попробуйте самостоятельно поэкспериментировать.
| Вернуться назад | Перейти к следующей странице |
|---|