ТаблицыПомимо прочих объектов в свой сайт Вы можете вставить таблицы.. и сразу забегая вперёд скажу о том что они имеют не малую значимость при создании сайта. С помощью таблицы можно не только выложить ту или иную информацию, тарифную сетку или график дежурств к примеру, но и взяв ёе за основу полностью построить на ней свой сайт, таблицы порой незаменимы при верстке страницы, но об этом позже. А сейчас давайте научимся её рисовать.. Рисуем таблицуТег <table> задаёт начало и конец таблицы, любая таблица, как известно, состоит из строк и столбцов, для этого есть ещё два тега: <tr> - строка таблицы<td> - столбец таблицы Вместе эти теги пишутся так: <table><tr> <td>ячейка</td> </tr> </table> Такая запись это самая маленькая таблица, в ней всего одна строка, содержащая один столбец - ячейку Поставим перед собой задачу нарисовать таблицу из трёх строк и трёх столбцов, а заодно вспомним атрибут border "рамка", который добавит нам наглядности. <html>
<head> <title>Таблица</title> </head> <body> <table border="1"> <tr> <td>строка1 ячейка1</td> <td>строка1 ячейка2</td> <td>строка1 ячейка3</td> </tr> <tr> <td>строка2 ячейка1</td> <td>строка2 ячейка2</td> <td>строка2 ячейка3</td> </tr> <tr> <td>строка3 ячейка1</td> <td>строка3 ячейка2</td> <td>строка3 ячейка3</td> </tr> </table> </body> </html> Разобрались? Если да, идем дальше.. Объединение ячеек.Часто при работе с таблицами возникает необходимость объединить те или иные ячейки в одну. На самом деле слово "объединить" здесь неуместно, использовал я его лишь для того, что бы вызвать ассоциации в Вашей голове. Вспомните тот же Word, добавив там таблицу Вы выделяете нужные ячейки и нажимаете кнопку "объединить".. здесь всё происходит не совсем так, и правильнее было бы говорить не "объединить" а "растянуть". Эту задачу решают атрибуты colspan и rowspan
Предположим что в нашем примере нам необходимо "объединить" в третьей строке вторую и третью ячейку, для этого атрибутуcolspan присваиваем значение 2 (растянуть на два столбца) и вставляем его в нужное место. <html>
<head> <title>Таблица</title> </head> <body> <table border="1"> <tr> <td>строка1 ячейка1</td> <td>строка1 ячейка2</td> <td>строка1 ячейка3</td> </tr> <tr> <td>строка2 ячейка1</td> <td>строка2 ячейка2</td> <td>строка2 ячейка3</td> </tr> <tr> <td>строка3 ячейка1</td> <td colspan="2">строка3 ячейка2</td> <td>строка3 ячейка3</td> </tr> </table> </body> </html> Как видите ячейка растянулась на два столбца, но при этом сдвинула третью ячейку, которая собственно нам теперь не нужна, а по сему мы её просто напросто удаляем. Специально допустил эту оплошность, чтобы Вы поняли принцип данного действия. Исправленный пример: <html>
<head> <title>Таблица</title> </head> <body> <table border="1"> <tr> <td>строка1 ячейка1</td> <td>строка1 ячейка2</td> <td>строка1 ячейка3</td> </tr> <tr> <td>строка2 ячейка1</td> <td>строка2 ячейка2</td> <td>строка2 ячейка3</td> </tr> <tr> <td>строка3 ячейка1</td> <td colspan="2">строка3 ячейка2</td> </tr> </table> </body> </html> Теперь попробуем объединить весь первый столбец в одну ячейку, используя атрибут rowspan, ну точнее растянем ячейку первой строчки первого столбца на три строки и на сей раз сразу уберём лишнее. <html>
<head> <title>Таблица</title> </head> <body> <table border="1"> <tr> <td rowspan="3">строка1 ячейка1</td> <td>строка1 ячейка2</td> <td>строка1 ячейка3</td> </tr> <tr> <td>строка2 ячейка2</td> <td>строка2 ячейка3</td> </tr> <tr> <td colspan="2">строка3 ячейка2</td> </tr> </table> </body> </html> Всё просто.. главное быть внимательным! Размеры таблицы.Если Вы самостоятельно тренировались с рисованием таблицы то наверняка обратили внимание на то, что размеры таблицы и ячеек по умолчанию ограничены вставленным в неё текстом.. и "ползают" себе как хотят. Вспомните про атрибуты width - ширина и height - высота, которые мы использовали для растягивания рисунков, они так же применимы к тегам <table>, <tr>и <td>. С этими атрибутами Вы знакомы, так что рассусоливать не буду.. просто приведу пример. В нём заданы размеры таблицы и отдельных её ячеек, а заодно и вся таблица выровнена по центру знакомым тегом <center> Пример: <html>
<head> <title>Таблица</title> </head> <body> <center> <table border="1" width="640" height="480"> <tr> <td rowspan="3" width="150">строка1 ячейка1</td> <td height="30">строка1 ячейка2</td> <td>строка1 ячейка3</td> </tr> <tr> <td height="30">строка2 ячейка2</td> <td>строка2 ячейка3</td> </tr> <tr> <td colspan="2" >строка3 ячейка2</td> </tr> </table> </center> </body> </html> Обратите внимание на то, что длина и ширина заданы не для всех ячеек. А зачем? Если и так таблица будет выровнена по самым широким и длинным ячейкам.. на то она и таблица.. Еще не всё рассказал.. Значения атрибутов width и height в таблице могут указываться не только в пикселях, но и в процентах Вот пример: <html>
<head> <title>Таблица</title> </head> <body> <center> <table border="1" width="640" height="480"> <tr height="25%"> <td width="15%"> строка1 ячейка1</td> <td width="25%">строка1 ячейка2</td> <td width="60%">строка1 ячейка3</td> </tr> <tr height="50%"> <td>строка2 ячейка1</td> <td>строка2 ячейка2</td> <td>строка2 ячейка3</td> </tr> <tr height="25%"> <td>строка3 ячейка1</td> <td>строка3 ячейка2</td> <td>строка3 ячейка3</td> </tr> </table> </center> </body> </html> В этом примере от общей ширины таблицы в 640 пикселей мы отдали 15% первой ячейке, 25% второй и 60% третьей. А по высоте из 480 пикселей по 25% первой и третьей строчке, а добрую половину места второй.. Короче справедливости в мире нет.. Ну до это Вам решать, сколько кому места отчуждать, главное, чтобы в сумме было 100%, иначе неразбериха будет.. смутное время.. революция.. |
