Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Лабораторна робота № 3
Створення таблиць
Мета роботи: навчитись створювати таблиці
Хід роботи:
|
11 |
12 |
13 |
|
21 |
22 |
23 |
Рис. 1. Таблиця, яку необхідно відобразити у вікні браузера
Записуємо відповідний HTML-код файлу Table.html з цієї таблицею (границі поки що невидимі) та переглянемо її у браузері:
<html>
<head>
<title>Створення таблиць </title>
</head>
<body>
<table>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</ table>
</body>
</html>
...
<table border="3" bordercolor="#000000" >
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</ table>
</body>
Переглянемо цю таблицю у браузері (рис. 2)
Рис. 2. Відображення таблиці із границями товщиною 3 пікселі у вікні браузера
…
<table border="3" bordercolor="#000000">
<tr>
<td height = "40" width = "60" bgcolor = "#ffffff">11</td>
<td width = "60" bgcolor = "#999999">12</td>
<td width = "60" bgcolor = "#ffffff">13</td>
</tr>
<tr>
<td height = "40" width = "60" bgcolor = "#999999">21</td>
<td width = "60" bgcolor = "#ffffff">22</td>
<td width = "60" bgcolor = "#999999">23</td>
</tr>
</table>
</body>
Рис. 3. Відображення таблиці із висотою рядків 40 та шириною стовпців 60 пікселів
Рис. 4. Таблиця, яку необхідно відобразити у вікні браузера
Реалізуємо це за допомогою параметру valign="middle" (top, bottom) для вертикального вирівнювання та параметру align="center" (left, right) для горизонтального вирівнювання. Записуємо HTML-код для заданої таблиці та переглянемо її у браузері
…
<table border="3" bordercolor="#000000" >
<tr>
<td height="40" width="60" valign="top" align="left" bgcolor = "#ffffff">11</td>
<td width="60" valign="middle" align="center" bgcolor = "#999999">12</td>
<td width="60" valign="bottom" align="right" bgcolor = "#ffffff">13</td>
</tr>
<tr>
<td height="40" width="60" valign="top" align="left" bgcolor ="#999999">21</td>
<td width="60" valign="middle" align="center" bgcolor = "#ffffff">22</td>
<td width="60" valign="bottom" align="right" bgcolor = "#999999">23</td>
</tr>
</table>
</body>
…
<table align="center">
<tr height="200">
<td width="200" valign="top" background="Zamok.jpg" align="center"> <h1><br><br>ЗВІТ</h1></td>
<td width="50" background="Tochka.jpg"></td>
<td width="300" valing="top" background="Yellow.jpg" align="center">
<h3>Таблиця, яка показує успішність групи ОА-Д-2:</h3>
<table cellspasing="3" border="3" bordercoler="black"
background="Yellow.jpg">
<tr height="40">
<td width="200" align="center"> п'ятірок </td>
<td width="100" align="center">10%</td>
</tr>
<tr height="40">
<td width="200" align="center" >четвірок </td>
<td width="100" align="center" >70% </td>
</tr>
<tr height="40">
<td width="200" align="center">трійок </td>
<td width="100" align="center" >20% </td>
</tr>
<tr height="40">
<td width="200" align="center">двійок </td>
<td width="100" align="center" >не має </td>
</tr>
</table>
<br> <h3>Викладач</h3>
</td>
</tr>
</table>
</body>
Переглянемо цю таблицю у браузері.
Завдання для самостійної роботи
Питання для самоперевірки
11
12
13
21
22
23