www.ilkaddimlar.

com Təlimçi: Rəşad Əliyev; 050 648 2737

HTML və CSS
Dərs 3:
Siyahı və Cədvəllər

rashad@aliev.info
İlk Addımlar tədris portalı
050 648 2737
Rəşad Əliyev
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Siyahı və Cədvəllər:
 Siyahıların köməkliyi ilə web səhifə-də məlumatların
strukturlaşması. Siyahı tipləri.
 HTML 4-də cədvəllərin üstünlükləri. Digər versiyalarla fərq.
 Cədvələ və onun xanalarına ölçü verilməsi qaydaları. Xanaların
birləşməsi. Cədvəllərlə işləyərkən olan tipik səhvlər.
 Cədvəllərin istifadə edilməsi. Cədvəllərin köməkliyi ilə web səhifə-
nin maketinin qurulması. Cədvəl kodlaşdırılması.
 İç-içə (daxili) cədvəllərin istifadə edilməsi.
 web səhifə-də cədvəllərin istifadə edilməsi nümunələri.
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Sıralanmamış siyahı
(unordered list)
<ul>
<li>birinci element</li>
<li>ikinci element</li>
...
<li>axırınci element</li>
</ul>
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Nişanların tipləri
Nişanın ekranda göstərilən
Başlanğıc teq
növü
<ul> Disk

<ul type="circle"> Dairəvi

<ul type="disc"> disk

<ul type="square"> kvadrat

www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Sıralanmış siyahı
(ordered list)
<ol>
<li>birinci element</li>
<li>ikinci element</li>
...
<li>sonuncu element</li>
</ol>
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Nömrələnmənin tipləri
Başlanğıc teq Nömrənin ekranda göstərilən növü
<ol> Adı nömrələnmə
(1, 2, 3,...)
<ol type="1"> Nömrələnmə adi qaydada gedir
(1, 2, 3,...)
<ol type="A"> Nömrələnmə böyük həriflərlə gedir
(A, B, C,...)
<ol type="a"> Nömrələnmə kiçik həriflərlə gedir
(a, b, c,...)
<ol type="I"> Nömrələnmə böyük rum rəqəmləri ilə olur
(I, II, III,...)
<ol type="i"> Nömrələnmə kiçik rum rəqəmləri ilə olur
(i, ii, iii,...)
<ol start="5"> Nə olacaq?
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Müəyyən etmə siyahısı

(definition list)
<dl>
<dt>Marketinq şöbəsi</dt>
<dd>Bu şöbə təhsul və xidmətlərin tanıtımı ilə
məşğul olurlar</dd>

<dt>Maliyyə şöbəsi</dt>
<dd>Bu şöbə isə maliyyə hesabatları ilə məşğul
olur</dd>
</dl>

• <dt> definition term(daxilində yalnız inline elementlər)

• <dd> definition description
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Qarışıq siyahılar
<dl><b>Qarışıq siyahı<b> Səhv kod
<dt><i>GÜNÜN XƏBƏRİ</i>
<dd>
<li>Bu gün yağış yağır
<li>Yağış bütün günü yağacaq
<dt><i>GECƏNİN XƏBƏRİ</i>
<dd>
<li>Gecə da yağış yağacaq
<li>Sabah yeni gün başlayacaq
</dl>
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Laboratoriya işi
 Siyahıların yaradılıb istifadə edilməsi (Lab_3)

1 list.html faylını istifadə edin

2 Qarışıq siyahı düzəldin

Sıralanmış və sıralanmamış siyahılardan istifadə edin:

- yerinə disk istivadə edilsin; (1,2,3,a,b,c) siyahısı avtomatik təyin edilsin.
3 Bütün bunlar yaradıldıqdan sonra –, rəqəmləri və simvolalrı (a,b,c) siyahıdan
silin.
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Cədvəl çəkirik - 3 mərhələ

<table>
<tr>
<td> M ə z m u n </td>
</tr>

</table>
<table>

<tr> <td> </td> <td> </td> </tr>

<td> - Table data
<th> - Table header <tr> <td> </td> <td> </td> </tr>

<tr> <td> </td> <td> </td> </tr>

</table>
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Adi cədvəl
<table>
<tr> <!–- İlk sətir -->
<td>(1,1)</td> <!–- Birinci xana -->
<td>(1,2)</td> <!-- İkinci xana -->
</tr>
<tr> <!–- İkinci sətir -->
<td>(2,1)</td> <!-- Birinci xana -->
<td>(2,2)</td> <!-- İkinci xana -->
</tr>
<tr> <!–- Üçüncü sətir -->
<td>(3,1)</td> <!-- Birinci xana -->
<td>(3,2)</td> <!-- İkinci xana -->
</tr>
</table>
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

TABLE elementinin atributları

Atribut Qiyməti
align left, right, center
width rəqəm və ya faiz
cellpadding rəqəm
cellspacing rəqəm
bgcolor rəng
background fayl
border rəqəm
bordercolor rəng
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

TR elementinin atributları
Atribut Qiyməti
align left, center, right
valign top, middle, bottom,
baseline
bgcolor rəng
bordercolor rəng

Valign – baseline numune, birinde h1, digerinde balaca text yaz

www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

TD (TH) elementlərinin atributları

Atribut Qiyməti
align left, center, right
valign top, middle, bottom,
baseline
width rəqəm və ya faiz
height rəqəm və ya faiz
bgcolor rəng
background fayl
nowrap
colspan rəqəm
rowspan rəqəm
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Xanaların birləşməsi
<table border="1" width="100%">
<tr>
<td colspan="2">Sütunlar birləşdi</td>
</tr>
<tr>
<td rowspan="2">Sətirlər birləşdi</td>
<td>Adi xana, 2-ci sətir</td>
</tr>
<tr>
<td>Adi xana, 3-cü sətir</td>
</tr>
<tr>
<td>4-cü sətir, sol xana</td>
<td>4-cü sətir, sağ xana</td>
</tr>
</table>
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Laboratoriya işi
 colspan və rowspan istifadəsi

1 Bir HTML fayl yaradıb belə bir cədvəl çəkin

1.1 1.2 1.3 1.4

2.1 2.3 2.4

3.1 3.2

4.1 4.2 4.3 4.4

www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Laboratoriya işi
 colspan və rowspan istifadəsi

1 Bir HTML fayl yaradıb belə bir cədvəl çəkin

1.1 1.3

2.1 2.2

3.2 3.3

4.1
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Cədvəlin başlığını yaradırıq

<table>
<caption align="top">Cədvəlin başlığı</caption>
...

Başlığın atributları:

align = top|bottom|left|right
valign = top|bottom
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Xanaların bairləşmə və məsafələrinin sxemi

border colspan
cellspacing
cellpadding rowspan

<tr><td colspan="2">...</td></tr>

<tr><td>...</td> <td rowspan="2">

... </td></tr>

<tr><td >...</td></tr>
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Laboratoriya işi (Ev tapşırığı)

 colspan və rowspan istifadəsi (Lab_3/tables/tables.html)

tables.html faylını açın

1 Aşağıda qeyd edilən 4 cəvvəli çəkin

2 1
1 4
5 6 3
6
1 1
2
3 3 4
5 5
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Səhifələrdə məsafələr (variantlar)

www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Səhifələrdə məsafələr: 2 sütun

<table border="1" cellpadding="15" cellspacing="5">
<tr valign="top">
<td>&nbsp;</td>
<td> <p> sütün 1 </td>
<td> <p> sütun 2 </td>
</tr>
</table>
<table border="0" width="100%" >
<tr valign="top">
<td width="60">&nbsp;</td>
<td> sütun 1 </td>
<td> sütun 2 </td>
</tr>
</table>
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Cədvəl daxili cədvəl

<table border="1" width="100%" cellpadding="2">
<tr> <th colspan="2">Daxili cədvəllər</th> </tr>
<tr><td rowspan="2" valign="top" width="120">Sətirlər birləşib</td>
<td>
<table border="1" width="100%" bgcolor="#EEEEEE">
<tr> <td>I sətir, A xanası </td> <td>I sətir, B xanası </td> </tr>
<tr> <td>II sətir, A xanası </td> <td>II sətir, B xanası </td> </tr>
<tr> <td>III sətir, A xanası</td> <td>III sətir, B xanası </td> </tr>
</table>
</td>
</tr>
<tr> <td>Sətir 3, Adi xanalar</td> </tr>
<tr><td>
<table border="1" width="100%" bgcolor="#EEFFEE">
<tr> <td>Daxili cədvəl</td> </tr>
<tr> <td>Cəmi2 sətir</td> </tr>
</table>
</td>
<td>Sətir 4, ilk xana</td>
</tr>
</table>
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Laboratoriya işi
 Daxili cəvdəllər

1 Verilmiş cədvəli və menyunu düzəldin

www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Cədvəli sütunlar üzrə qruplaşdırırıq

<table>
<colgroup width="50" span="5">
<tr> ...
</table>

Colgroup atributları:
align = center|left|right
valign = bottom|middle|top
width = rəqəm və ya faiz
span = rəqəm

<colgroup width="20">
<col span="10">
<col width="100">
</colgroup>
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Sərbəst iş
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Ev tapşırığı
Xanaların birləşməsi və daxili cədvəllər
www.ilkaddimlar.com Təlimçi: Rəşad Əliyev; 050 648 2737

Nəticə
 WEB-səhifədə məlumatların strukturlaşması üçün növbəti
tip siyahılardan istifadə etmək olar: Sıralanmış,
Sıralanmamış, Müəyyən edilmiş. Siyahıların
qarışdırılması mümkündür.
 Cədvəllər Exceldəki kimi məlumatların verilməsi
üçünistifadəe dilir 
 Həmçinin CSS(Kaskad Tipli Cədvəllər) yaranmamışdan
əvvəl saytların maketinin qurulması üçün cədvəllərdən
istifadə edirdilər.
 Cədvəllər bir birinin daxilində ola bilər.