Отримання знань
дистанційна підтримка освіти школярів
|
| Створення простої таблиці Опис таблиць в HTML-документах здійснюється за допомогою контейнера <TABLE>...</TABLE>. Таблиця задається двома контейнерами тегів <TR>...</TR> - опис рядка таблиці і <TD>...</TD>- опис комірки таблиці. За змовчуванням текст всередині таблиці вирівнюється по лівому краю, а ширина стовпця таблиці визначається найбільш довшим елементом в цьому стовпці. Ширина таблиці задається атрибутом для тега <TABLE>, а значення ширини таблиці може задаватися в пікселях або у відсотках від ширини екрана. Вміст кожної комірки може бути вірівняно з допомогою атрибутів align="..." (горизонтальне розміщення) і valign="..." (вертикальне розміщення) для тегів <TR> і <TD>. Атрибут align="..." може приймати слідуючі значення left - притиснути вліво, right - притиснути вправо, center - розмістити по центру; атрибут valign="..." може приймати слідуючі значення top - притиснути вверх, bottom - притиснути вниз, middle - розмістити по центру. Дозволяється добавляти до таблиці, комірки, рядка заголовок. Тег, який розміщується після тегу ,задає заголовок таблиці, що розміщується по центру відносно таблиці. За допомогою атрибутів align="..." і valign="..." заголовок таблиці можна розміщувати де завгодно в таблиці. Надання заголовку для рядка чи стовпця здійснюється за допомогою тегу <TH> після тегів <TR> і <TD> відповідно. Атрибут border="..." після тега <TABLE> рисує рамку навколо таблиці і кожної комірки, при цьому ширина рамки задається в пікселях. Слід відмітити, що атрибути colspan=".." і rowspan=".." тегів <TR> і <TD> дозволяють об'єднувати комірки в групи, навколо яких рисується рамка. Приклад <html> <head> <title>проста таблиця</title> </head> <body> <table border="3"> <!--початок таблиці --> <tr> <td colspan=2 align="center"> <b>Заголовок таблиці</b> </td> </tr> <tr> <td align="center"> перша комірка першого рядка </td> <td align="center"> друга комірка першого рядка </td> </tr> <tr> <td align="center"> перша комірка другого рядка </td> <td align="center"> друга комірка другого рядка </td> </tr> </table> <!-- закінчення таблиці--> </body> </html> Відеоприклад
|
