Deklarowanie tytułu związanej z tabelą

Wielkość: px

Rozpocząć pokaz od strony:

Download "Deklarowanie tytułu związanej z tabelą"

Iwona Sowa
8 lat temu
Przeglądów:

1 Tabele 1

2 Deklarowanie tytułu związanej z tabelą <table> <caption </table> align="top"> Przychody w latach </caption> Położenie pozbawione stylu Treść nagłówka Formatowanie położenia w stylach <table class= dane > <caption > Przychody w latach </caption> </table>.dane caption { caption-side:top; color:#667766f; Inna wartość to bottom 2

Formatowanie położenia w stylach <table class= dane > <caption > Przychody w latach

3 Deklarowanie wierszy i kolumn nagłówkowych <table > <tr> <th> zawart.1</th><th> zawart.2</th><th> zawart.3</th></tr> </table> Przychody w latach TR <th> </th> <th>2008</th> <th>2009</th> <th>2010</th> Darowizny 11,88 9,22 20,33 Znacznik <th> identyfikuje nagłówek wiersza lub kolumny, aby związać z kolumnami lub wierszami dodajemy atrybut SCOPE= wartość Wartość: col Watrość: row <th scope= col >2008</th> <th scope= row >Darowizny</th> <tr><th scope="col"></th><th scope="col">2007</th><th scope="col">2008</th><th scope="col">2009</th><th scope="col">2010</th> </tr> 3

<th> identyfikuje nagłówek wiersza lub kolumny, aby związać z kolumnami lub wierszami dodajemy atrybut SCOPE= wartość Wartość: col Watrość: row

4 Deklarowanie kolumn w wierszach <table> <tr><td> </td> <td> zawart.1</td><td> zawart.2</td><td> zawart.3</td></tr> </table> TD TD TD TR <td> </td> <td>zawartość 1</td> <td>zawartość 2</td> <td>zawartość 3</td> Proszę zauważyć, szerokość tabeli dopasowuje się do zawartości pól TD Szerokość tabeli deklaruje się: <table wight= wartość > <table width= 600"> 4

Tabela z kodem <table class="dane" summary="tabela, w której zestawiono dane przychodów od 2007 do 2010" width="600"> wartość zapisana w summary nie jest wyświetlana, to tylko dodatek dla aplikacji

5 Tabela z kodem <table class="dane" summary="tabela, w której zestawiono dane przychodów od 2007 do 2010" width="600"> wartość zapisana w summary nie jest wyświetlana, to tylko dodatek dla aplikacji głośnomówiących <caption>przychody w latach </caption> <tr><th scope="col"> </th> <th scope="col">2007</th><th scope="col">2008</th> <th scope="col"> 2009</th><th scope="col">2010</th> </tr><tr> <th scope="col">darowizny</th><td>11,88</td><td>9,22</td><td>20,33</td><td>0,45</td> </tr> <tr><th scope="col">inwestycje</th><td>3,22</td><td>1,88 </td><td>19,33 </td><td>0,22</td> </tr> <tr><th scope="col">inne</th><td>12,500</td><td>6,223 </td><td>0,330 </td><td>11,66</td> </tr> </table> 5

scope="col"> 2009</th><th scope="col">2010</th> </tr><tr> <th scope="col">darowizny</th><td>11,88</td><td>9,22</td><td>20,33</td><td>0,45</td> </tr> <tr><th

6 Obramowanie tabeli 1. Nadajemy klasę tabeli lub selektor div z id <table class="dane" width="600"> 2. Wykorzystujemy styl wewnętrzny lub zewnętrzny zalecam zewnętrzny, definiujemy styl poleceniem: border: wartość1 wartość2 wartosc3; Wartość 1 szerokość obramowania (px) Wartość 2 styl ramki (solid, double, dotted, dashed, insert, outset) Wartość 3 - kolor ramki.dane{ border: 1px solid #338BA6; 6

Wykorzystujemy styl wewnętrzny lub zewnętrzny zalecam zewnętrzny, definiujemy styl poleceniem:

7 Obramowanie pojedynczych komórek tabeli Tylko komórki <th>:.dane th { border: 1px solid #77C0D4; komórki <th> i <td> wymieniamy po przecinku :.dane th, td { border: 1px solid #77C0D4; 7

8 Usuwanie odstępów pomiędzy komórkami tabeli Po obramowaniu, zawsze występują domyślne odstępy (2px) pomiędzy komórkami, ponieważ ramki nie zachodzą na siebie Usuwamy poleceniem: Wartość: border-collapse:wartość; collapse pojedyncze obramowanie, separate komórki są od siebie odseparowane (domyślnie) 8

zachodzą na siebie Usuwamy poleceniem: Wartość: border-collapse:wartość;

9 Wyrównanie zawartości komórek 1. Zawartość komórek <td> do prawej (liczby 2. Zawartość komórek <th> do lewej ( nagłówki) Formatujemy wcześniej zdefiniowaną klasą:.dane th { text-align:left; Pojawił się problem, przeformatowały się niechcąco również komórki nagłówka kolumn, chcemy aby pozostały centralnie lub po prawo 9

10 Dokonujemy zagnieżdżonej selekcji: <table class="dane" width="600"> <caption>przychody w latach </caption> <tr id="header_1"><th scope="col"></th><th scope="col">2007</th><th scope="col">2008</th><th scope="col">2009</th><th scope="col">2010</th> </tr> </table>.dane #header_1 th { text-align:center; 10

scope="col"></th><th scope="col">2007</th><th scope="col">2008</th><th

11 Marginesy w komórkach Formatujemy poleceniem: padding:wartość; Wartość:top, bottom, left, right 14px 14px.dane th { text-align:left; padding:7px; 11

12 Inna metoda formatowania odstępów między zawartością elementu TD a ścianami komórki jest dyrektywa cellpadding <table cellpadding= 7px > 12

13 Formatowanie na przemian wierszy lub kolumn Dla obszernych tabel aby ułatwić analizę danych stosuje się naprzemienne formatowanie wierszy.dane tr.naprz { background:#dfe7f2; Zastosowałem klasa w klasie i odwołałem się kaskadowo do wierszy <table class="dane" width="600"> <tr id="header_1"><th scope="col"></th><th scope="col">2007</th><th scope="col">2008 </th><th scope="col">2009</th><th scope="col">2010</th> </tr> <tr><th scope="col">darowizny</th><td>11,88</td><td>9,22</td><td>20,33 </td><td>0,45 </td> </tr> <tr class="naprz"> <th scope="col">inwestycje</th><td>3,22</td><td>1,88 </td><td>19,33</td><td>0,22</td> </tr> <tr><th scope="col"> Obligacje</th><td>7,22</td><td>5,88</td><td>9,33</td><td>5,22</td> </tr> <tr class="naprz"><th scope="col">inne</th><td>12,500</td><td>6,223</td> <td>0,330 </td><td>11,66</td> </tr> 13 </table>

scope="col">2008 </th><th scope="col">2009</th><th scope="col">2010</th> </tr> <tr><th scope="col">darowizny</th><td>11,88</td><td>9,22</td><td>20,33 </td><td>0,45 </td> </tr> <tr class="naprz"> <th

14 Formatowanie wiersza po wskazaniu kursorem 1. Zmiana wszystkich wierszy po wskazaniu : <table class= dane >.dane tr:hover { background:#ffff00; 2. Zmiaina wybranych wierszy po wskazaniu: <table class= dane >.. <tr class= naprz ><th></th><td></td>.... <tr class= naprz ><th></th><td></td>. </table>.dane tr.naprz:hover { background:#ffff00; 14

15 Łączenie kolumn 1. Łączenie kolumn: dyrektywa colspan= liczba integer A B C D 1a 1bc 1d 2a 2b 2cd <table id="col_span"> <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr> <tr><td>1a</td><td colspan="2">1bc</td><td>1d</td></tr> <tr><td>2a</td> <td>2b </td><td colspan="2">2cd</td></tr> Selektor wykorzystano do obramowania komórek tr i td #col_span tr,td { border:solid #000000; border-collapse:collapse; 15

<tr><td>a</td><td>b</td><td>c</td><td>d</td></tr> <tr><td>1a</td><td

16 Łączenie wierszy 1. Łączenie wierszy: dyrektywa rowspan= liczba integer A B C D a12 1bc 1d 2b 2cd <table id="col_span"> <tr><td>a</td><td>b</td><td>c</td><td>d</td></tr> <tr><td rowspan= 2 >a12</td><td colspan="2">1bc</td><td>1d</td></tr> <tr> <td>2b </td><td colspan="2">2cd</td></tr> 16

17 Zadanie do wykonania na ćwiczeniach 17

Podobne dokumenty

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER=1> <TR> Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem