Cədvəllərlə olan sadə sayt düzəldirik
Demək, beləliklə bizim baxdığımız nümunələrdən birini götürək:
<table cellspacing="5">
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
Gəlin bunun əsasında mükəmməl səhifə düzəldək. İlk olaraq bunun üçün vacib teqləri daxil edək:
<html>
<head>
<title>Menim cedvellerle olan ilk saytim</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">
<table cellspacing="5">
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
</body>
</html> Nümunə
Əgər siz nə alındığına baxsanız, görəcəksiniz ki, cədvəl ölçüsünə görə balacadır, demək biz cədvəlin hündürlük və eninin atributlarını dəyişib yenilərini yazmalıyıq:
<html>
<head>
<title>Menim cedvellerle olan ilk saytim</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">
<table cellspacing="5" width="700">
<tr>
<td width="400" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="300" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td bgcolor="#336699"> <center>2x1</center> </td>
<td bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
</body>
</html> Nümunə
Biz bütün cədvəlin enini 700 piksel təyin etdik. Uyğun olaraq cədvəlin bir sətirdəki bütün sütunlarının enləri 700 pikseli keçməməlidir: 300+400=700. Bizim halda yalnız bir sətirdəki sütunlara qiymət təyin etdik, digər sətirlər onlara müvafiq olaraq avtomatik qiyməti təyin edirlər. Biz hündürlüyü (height) təyin etmədik, cədvəl üçün 100%-lik hündürlüyü təyin etmək olmaz, bu spesifikasiya nəzərdə tutulmayıb, belə ki, bizim cədvəl özü ora nə isə məzmun (şəkil, mətn) yerləşdirdikcə avtomatik uzanır.
<html>
<head>
<title>Menim cedvellerle olan ilk saytim</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">
<center>
<table cellspacing="5" width="700">
<tr>
<td width="400" bgcolor="#FFCC33" colspan="2">
<div align="left">
Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqqimda oxumaq uchun bura baxa bilerler ve oz urek sozlerini qonaq kitabima yaza bilerler. <br><br> Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve <b>menim daha bir virtual dostum artsin. :) </b><br><br> Shekilde men tesvir olunmusham. Sheklin keyfiyyeti chox da yaxshi deyil, teessuf, ona gore de menim uzume diqqetle baxmaq problem yaradir. Lakin yene de gorunur ki, men yaxshiyam. <br><br> Eger sen de bele fikirleshirsense, onda gel gorushek, bir az kafede chay icherik, danishariq:) Kim bilir belke biz real heyatda dost olduq:)
</div>
</td>
<td width="300" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td bgcolor="#336699"> <center>2x1</center> </td>
<td bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
</center>
</body>
</html> Nümunə
Deməli beləliklə, biz cədvəli sizə tanış olan virtual dost haqqında olan məqalə ilə doldurduq. Biz mətni "div" teqinin köməkliyi ilə sol tərəf üzrə uyğunlaşdırdıq. Cədvəlin özünü isə "center" teqinin köməkliyi ilə mərkəzdə yerləşdirdik.
Əgər siz fikir versəniz görəcəksiniz ki, mətn bizim sətrin qıraqlarına çox birləşib, bu da çox da gözəl görsənmir. Biz nə edə bilərik? Əlbəttə ki, cədvəldə "cellpadding" atributunu daxil etmək olar.
<html>
<head>
<title>Menim cedvellerle olan ilk saytim</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">
<center>
<table cellspacing="5" width="700" cellpadding="20">
<tr>
<td width="400" bgcolor="#FFCC33" colspan="2" valign="top">
<div align="left">
<h3>Sehifeme xosh gelmisiniz</h3>
Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqda oxumaq uchun bura baxa bilerler ve oz urek sozlerini qonaq kitabima yaza bilerler. <br><br> Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve <b>menim daha bir virtual dostum artsin. :) </b><br><br> Shekilde men tesvir olunmusham. Sheklin keyfiyyeti chox da yaxshi deyil, teessuf, ona gore de menim uzume diqqetle baxmaq problem yaradir. Lakin yene de gorunur ki, men yaxshiyam. <br><br> Eger sen de bele fikirleshirsense, onda gel gorushek, bir az kafede chay icherik, danishariq:) Kim bilir belke biz real heyatda dost olduq:)
</div>
</td>
<td width="300" bgcolor="#336699" rowspan="2" valign="top">
<div align="center"><img src="primtocodephoto.gif" alt="menim sheklim"><br><br><img src="ptimtocodephoto2.gif" alt="Menim sheklim"></div>
</td>
</tr>
<tr>
<td bgcolor="#336699"> <center>2x1</center> </td>
<td bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
</center>
</body>
</html> Nümunə
"cellpadding" atributundan başqa biz sayta başlıq da təyin etdik, belə ki, səhifəyə daxil olan harda olduğunu anlasın, həmçınin biz 2-ci sətir üçün də məzmun əlavə etdik. Eyni zamanda "valign" atributunun köməkliyi ilə biz mətn və şəkilləri çərçivənin yuxarısına doğru yerləşdirdik (yadınızdadırsa, susmaya görə əgər "valign" daxil edilmirsə, onda məzmun çərçivənin mərkəzi üzrə yerləşir).
Gəlin qalan 2 çərçivəyə məzmunumuzu daxil edək:
<html>
<head>
<title>Menim cedvellerle olan ilk saytim</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">
<center>
<table cellspacing="5" width="700" cellpadding="20">
<tr>
<td width="400" bgcolor="#FFCC33" colspan="2" valign="top">
<div align="left">
<h3>Sehifeme xosh gelmisiniz</h3>
Men hele teze-teze virtual dunya ile tanish olmusham, lakin artiq ozume ev sehifesi duzeltmek isteyirem. Menim dostlarim ve tanishlarim menim shekillerime baxmaq ve menim haqda oxumaq uchun bura baxa bilerler ve oz urek sozlerini qonaq kitabima yaza bilerler. <br><br> Ola biler ki, kim ise tesadufen bu sehifeye daxil olsun ve <b>menim daha bir virtual dostum artsin. :) </b><br><br> Shekilde men tesvir olunmusham. Sheklin keyfiyyeti chox da yaxshi deyil, teessuf, ona gore de menim uzume diqqetle baxmaq problem yaradir. Lakin yene de gorunur ki, men yaxshiyam. <br><br> Eger sen de bele fikirleshirsense, onda gel gorushek, bir az kafede chay icherik, danishariq:) Kim bilir belke biz real heyatda dost olduq:)
</div>
</td>
<td width="300" bgcolor="#336699" rowspan="2" valign="top">
<div align="center"><img src="primtocodephoto.gif" alt="Menim sheklim"><br><br><img src="ptimtocodephoto2.gif" alt="Menim sheklim"></div>
</td>
</tr>
<tr>
<td bgcolor="#336699">
<div align="center"><a href="mailto:rashad@aliev.info">Mene mektub yaz</a></div>
</td>
<td bgcolor="#FFCC33">
<div align="center"><a href="#">Shekillerime bax</a></div>
</td>
</tr>
</table>
</center>
</body>
</html> Nümunə
Beləliklə son 2 sətrə biz şəkillərimizə bağlantı və istifadəçilərin bizimlə əlaqə saxlaması üçün e-poçt ünvanını daxil etdik. Təbii ki, ilk olaraq şəkillər olan bir səhifəni yaratmaq lazımdır ki, sonra ona bağlantı qoyaq.
<a href="#"> … </a> - fikir versəniz, biz sənədə bağlantı qoymamışıq, onun yerinə dies (#) işarəsi yerləşdirmişik. Yadınızdadırsa, dies (#) işarəsi səhifə daxili bağlantılar yaratmaq üçün istifadə edilir. Lakin bizim halda daxili bağlantının adı təyin edilməyib və ona görə də səhifəmizdə qoşma yoxdur. Bu isə o deməkdir ki, istifadəçi bu bağlantıya basdıqda heç bir yerə keçməyəcək. Yəni ki, bu boş bağlantı deməkdir. Belə bağlantıları koderlər əsasən sənəddə hansı *.html linklərin olduğunu bilmədən, saytın maketini yaradakən istifadə edirlər.
Demək, yekuna baxaq: gördüyünüz kimi hər şey çox sadədir. Biz sizinlə, başlayan koderlər ilə fəxr edəcəyimiz qədər səliqəli və hətta original bir səhifə yaratdıq. Belə səhifəni heç utanmadan dost və tanışlara göstərmək olar. Belə saytı cəsarətlə internetdə yerləşdirmək də olar. Şübhəsiz ki, onun üzərində bir az işləmək, bir neçə original şəkil əlavə etmək və fantaziyanıza müvafiq olaraq bəzi əlavələr etmək olar. Lakin mən bununla cədvəllər haqqında olan nağılımızı bitirib "Əlavələr" bölümünə keçirəm.