1. Створіть текстовий документ з назвою table.html. Відкрийте його і пропишіть код, який дозволяє створити клітинки таблиці та заповнити їх текстом. Перший рядок створимо як заголовний. Текст у першому стовпці, - як текст з напівжирним накресленням. Код матиме вигляд
<html>
<head>
</head>
<body>
<table>
<tr>
<td> </td>
<th>Зима </th>
<th>Весна </th>
<th>Літо </th>
<th>Осінь </th>
</tr>
<tr>
<td><b>1. </b></td>
<td>Грудень </td>
<td>Березень </td>
<td>Червень </td>
<td>Вересень </td>
</tr>
<tr>
<td><b>2. </b></td>
<td>Січень </td>
<td>Квітень </td>
<td>Липень </td>
<td>Жовтень </td>
</tr>
<tr>
<td><b>3. </b></td>
<td>Лютий </td>
<td>Травень </td>
<td>Серпень </td>
<td>Листопад </td>
</tr>
</table>
</body>
</html>
2. Збережіть внесені зміни у файлі table.htmlта оновіть його у браузері. Ви побачите
3. Задамо границі таблиці. Використовуємо параметр border тега <table>. У html-коді тег <table> записуємо так
<table border = "2">
Після оновлення сторінки у браузері отримаємо
4.Для того щоб змінити колір границь таблиці можна використати параметр bordercolor тега <table>. Таким чином тег <table> запишемо так
<table border = "2" bordercolor = "#000000">
У результаті отримаємо
5. Змінимо колір клітинок першого рядка відповідно до поставленного завдання. Це можна зробити, записуючи параметр bgcolor в тегах, які формують клітинку (<td> або <th>).
Код, в якому формується перший рядок, вносимо відповідні зміни
<tr>
<td> </td>
<th bgcolor = "#00ffff">Зима </th>
<th bgcolor = "#228b22">Весна </th>
<th bgcolor = "#ff0000">Літо </th>
<th bgcolor = "#ffd700">Осінь </th>
</tr>
Оновлюємо сторінку в браузері та отримаємо результат
Щоб визначити фон всієї таблиці потрібно в тегах <table>використати параметр bgcolor = “колір фону”!!!
6.Змінимо ширину і висоту рядків та стовпців (відповідно до завдання). Для цього у тегах <td> або <th> записуємо параметри height та width. Вважаємо, що висота першого рядка 60 пікселів, а першого стовпця 70 пікселів. Тоді html-код сторінки матиме вигляд
<html>
<head>
</head>
<body>
<table border = "2" bordercolor = "#000000">
<tr>
<td height = "60" width = "70"> </td>
<th bgcolor = "#00ffff" height = "60">Зима </th>
<th bgcolor = "#228b22" height = "60">Весна </th>
<th bgcolor = "#ff0000" height = "60">Літо </th>
<th bgcolor = "#ffd700" height = "60">Осінь </th>
</tr>
<tr>
<td width = "70"><b>1. </b></td>
<td>Грудень </td>
<td>Березень </td>
<td>Червень </td>
<td>Вересень </td>
</tr>
<tr>
<td width = "70"><b>2. </b></td>
<td>Січень </td>
<td>Квітень </td>
<td>Липень </td>
<td>Жовтень </td>
</tr>
<tr>
<td width = "70"><b>3. </b></td>
<td>Лютий </td>
<td>Травень </td>
<td>Серпень </td>
<td>Листопад </td>
</tr>
</table>
</body>
</html>
Після оновлення сторінки у браузері, отримаємо
7.Вирівняємо текст у першому стовпці до правого краю клітинок. У тегах <td> записуємо параметр вирівнювання align зі значенням "right". Код сторінки матиме вигляд
