Tabele - zadania

Karta pracy 2013/2014

Dokument:: http://www.plotkarka.eu/kp/formatowanietabel2.html
Autor:: Radosław Kowaluk

Ćwiczenia

Przeanalizuj zadanie

Wykonaj stronę WWW przedstawiającą kalendarz na jeden miesiąc. Opracuj zewnętrzny arkusz CSS, który będzie odpowiadać za wygląd kalendarza. Parametry wyglądu poszczególnych elementów kalendarza opisane są w załączonym projekcie. (Zadanie może być wykonywane w grupach lub indywidualnie. Ocenie podlegać powinno wykonanie strony pod względem zgodności z projektem, zastosowania odpowiednich znaczników oraz poprawne formatowanie strony przez arkusz stylów css).

Źródło: P.N. E14.1 KOWEZiU 2012

Kod tabeli kalendarza

Utwórz plik kalendarz.html a w nim kod:

<!doctype html>
<html>
<head>
<title>Styczeń 2014</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css"
 href="style.css">
</head>
<body>
<div>
<table>
<caption>Styczeń 2014</caption>
<tr>
<th>P</th>
<th>W</th>
<th>Ś</th>
<th>C</th>
<th>P</th>
<th>S</th>
<th class="c">N</th>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td class="c">5</td>
</tr>
<tr>
<td class="c">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td class="c">12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td class="c">19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td class="c">26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td class="c"></td>
</tr>
</table>
</div>
</body>
</html>

Testowanie

Wyświetl plik kalendarz.html w przeglądarce.

Walidacja HTML

Sprawdź poprawność kodu HTML

zewnętrzny arkusz CSS

Utwórz plik style.css a w nim kod:

div {
background: silver;
padding: 15px;
width: 220px;
}
table {
background: white;
border-collapse: collapse;
font-family: Arial, sans-serif;
font-size: 13px;
width: 100%;
}
caption {
font-size: 18px;
font-weight: bold;
margin: 0 0 10px;
text-align: center;
}
td, th {
border: 1px solid #ccc;
line-height: 22px;
text-align: center;
}
.c {
color: red;
}

Testowanie

Wyświetl plik kalendarz.html w różnych przeglądarkach.

Walidacja CSS

Sprawdź poprawność kodu CSS

Publikacja

Opublikuj kalendarz.