Сайт беттеудің бірінші түрі - кестелер қолдану арқылы жүзеге асады.

31 Тамыз 2014

Сайт парақшаларын беттеудің екі түрі қолданылады.


Бірінші түрі - кестелер арқылы беттеу.Бұрын CSS пайда болмай тұрғанда, сайт парақшалары осы кестелер арқылы жүзеге асырылатын болған.Ал қазір CSS ті кеңінен қолдана бастағаннан соң ол жолмен беттеу азайып, орнына блоктық беттеу пайда болды.|


Бірақ, кей жерде ол өзінің колдануда қарапайымдылығымен әлі де өз жұмысын жақсы атқарып келеді, мысалы менің сайтымдағы пікір қосу бөлімі, PHP операторлары мен суперғалами айнымалылар тізімдері сол кестелер арқылы жасалынған.

Ал кестелер арқылы жасалатын беттеуді түсіну үшін, ең алдымен HTML тегтерінің тағы бір өкілі - "Table" және оның құрамына кіретін  "tr", "td", "th" және т.б. мүшелерімен жақсылап танысып алуымыз керек.

HTML тегтері - "table", "tr", "td", "th"

"Table" - блоктық тег болып табылады, яғни ол да өзіміз білетін "div" не болмаса "p" сияқты ешқандай CSS ережелері қолданылмаса браузердің толық бір қатарын алып орналасады.

Сонымен бұл тег таблицаның басы мен аяғын жариялайды, сосын оның ашық тегінен кейін <tr> сосын<td> өздерінің жабық жұптарымен кесте құрайды.Бір сөзбен айтқанда, "tr" тегі кестенің қатарларын, ал "td" тегі оның бағандарын құрайды.Және тағы  "th" деген тег бар, ол тек бағандардың тақырыптарын жуан түрде жазу үшін қолданылады.

Ол кестені төмендегі суреттегідей қыпып бейнелеуге болады: 



HTML тегі - "Table" атрибуттары. 

Олардың атрибуттарын білу үшін тағы да W3C стандарттарына жүгінеміз, ол үшін олардың HTML элементтеріне арналған парақшасының атрибуттарға, соның ішінде "table" тегінің атрибуттарына арналған бетіне сілтеме арқылы кірейік.

Олардың арасынан тек ең көп қолданылатынын көшіріп алалық:




Жоғарыдағы бірінші атрибутынан "width" бастайық, ол -кестенің енін px (пикселмен) және пайыздық өлшеммен % белгілейді.

Ал "border" - барлық ұяшықтар мен кестенің айналасына көрсетілген мәні бойынша шекара салады, ал мәні жоқ болса ешқандай шекара  салынбайды, демек парақша бетінде шекара көрінбейді.

Келесі "cellspacing" - ұяшық шекарасынан көрші ұяшыққа дейінгі аралықты, ал "cellpadding" -  ұяшық ішіндегі мәтіннен не суреттен оның шекарасына дейінгі аралықты сипаттайды.

Енді "align" туралы айтсақ, онда оны қолданбау ұсынылған.Бірақ, сонда да үш мәндерге рұқсат еткен.

"left" - кесте парақшаның сол жақ бетіне, "center" - кесте қақ ортаға, ал "right" - парақшаның оң жағына орнығады делінген.

Ал келесі "bgcolor" кестенің артындағы фонының түсін белгілейді де, "background" - фон үшін сурет бекітуге болатынын көрсетіп тұр.

HTML тегі - "Tr" атрибуттары.

Оны анықтау үшін тағы да жоғарыда сілтеме арқылы атап өткен W3C стандарттары сайтындағы 'tr" тегі атрибуттарының анықтамасына  жүгінеміз:




Бұл жерде де "Tr" атрибуттары - "align", "bgcolor" дегендер жаңа жоғарыда атап өткен "Table" атрибуттары сияқты белгіленеді, яғни олар арқылы қатардың ішіне орналасқан ұяшықтар құрамындағы мәтін немесе сурет т.т.  оңға, солға не қақ ортаға туралауға болады. Айырмашылық тек "valign" -вертикаль бойынша туралайды, яғни қатардың ұяшықтарының ішінде орналасқан дүниенің бәрін вертикаль бойынша жоғары-төмен бағытта туралай алады:

"top"- жоғарыға, "middle"-ортасымен,  "bottom"-төмен бағытта, ал "baseline" - мәтінді шрифтердің базалық сызығы бойынша туралайды. 

HTML тегі "Td" және "Th" атрибуттары.

W3C стандарттарына тағы да жүгініп, "td" ұяшығының және "th" кесте бағаны тақырыбының атрибуттарын қарастырайық:



Бұл "td" мен "th" атрибуттары да, соның ішінде "align", "valign", "width, "height", "bgcolor", "background" -  жоғарыда көрсетілген "table" мен "tr" атрибуттары сияқты өз ұяшықтарының құрамымен соларға ұқсас әрекет жасайды. 

Ал басқалары "nowrap" - ұяшық ішінде мәтін жолдарының келесі қатарға өтуіне сыңар тег <br> болмаса тиым салады, яғни пробел арқылы келесі жолды бастай алмайсыз, "rowspan" - бір бағандағы бірнеше  ұяшықтарды бір ұяшыққа біріктіреді, "colspan" - керісінше, бір қатардағы бірнеше ұяшықтарды бір ұяшыққа біріктіреді.

Енді біз кестелердің атрибуттарымен жақсылап таныстық, олай болса тәжірибеге көшейік.

Кестелер жасау мысалы

1. Мына төмендегі кесте жасауға арналған HTML кодын өзіміз жақсы танитын Notepad редакторына көшіріп салайық.


Бұл жерде көріп отырғаныңыздай "table" тегінде атрибуттардан бар болғаны "width"-ені, "bgcolor"- фонның түсі, "border"- шекарасының ені 2 ғана берілген.Енді қалауыңызша, осы файлды Денверде браузер арқылы  localhost/testphp/kestbet1.html деп шақырып , болмаса оның өзін тек түртіп жіберіп  мынадай нәтижесін көре аласыз:



Ешқандай артықшылығы жоқ жай ғана кесте болып шықты.

2. Енді біз оны барлық жоғарыда айтылған атрибуттармен "table", "th", "tr", "td" тегтерін сипаттап Notepad редакторына жазып шығайық.


Төменде берілген жоғарыдағы код көшірмесі:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Кестелер</title>
</head>
<body>
<table align=center width=400px bgcolor=#00ff00 border=2 cellpadding=4 cellspacing=6>
<tr><th bgcolor=gold>1-th тегі</td><th>2-th тегі</td><th>3-th тегі</td></tr>
<tr><td colspan=2 bgcolor=#ff0000>1-ұяшық</td><td rowspan=2 valign=top>3-ұяшық</td></tr>
<tr><td width=50% align=right>4-ұяшық</td><td>5-ұяшық</td></tr>
<tr bgcolor=#ffff00><td>7-ұяшық</td><td>8-ұяшық</td><td>9-ұяшық</td></tr>
</table>
</body>
</html>

Көріп отырғаныңыздай мен қолымнан келгенше барлық атрибуттарды колдануға тырыстым, егер ұмытып кеткендерім болса онда өзіңіз оны осы кодқа қосып нәтижесін көріңіз.

Негізінде бұл кодтағы атрибуттардың бәрі жоғарыда айтылып өтті, мен тек "rowspan" мен "colspan"ға тоқталып өткім келіп тұр.Осы аталған "colspan" арқылы 1-ші және 2-ші ұяшықтарды біріктіру үшін, 1-ші  "td" тегіне colspan=2 деп жазамыз да, 2-ші ұяшықты кестеден алып тастаймыз.

Ал 3-ші мен 6-шы ұяшықтарды біріктіру үшін,  3-ші  "td" тегіне rowspan=2 деп жазамыз да 6-шы ұяшықты жоқ қылып жібереміз.

Менде кесте былай болып шықты:

 

Енді сіз үшін кесте жасау оңай болатынына сенімдімін.Бұл кестелер арқылы әр ұяшыққа мәтін не сурет салып, парақ бетін әдемі қылып өрнектеуге болады.

Кесте арқылы қалай беттеуге болады, немесе кестелеп беттеу деген не.

Алдында айтып өткенімдей,"tr" тегінің ішіне қалауымызша бағандар, яғни ұяшықтар орната аламыз және де  сол ұяшықтардың ішіне де қанша болса сонша дүние сиғыза аламыз.

Міне кестенің осы қасиеті бұрын CSS жоқ кезде парақща беттерін жасауға зор мүмкіндік берген.

Кестенің бұл ерекшелігі орыстардың матрешкасы сияқты жүзеге асқан, яғни олардың бірінің ішіне бірі орналасуы кестелеп беттеуді елестетеді.

Сонымен, алдымен кесте HTML кодында өзінің тегтері -"table", "tr", "td", "th" арқылы жазылады, сосын сол "td" тегінің ішіне тағы бір кесте сипатталып жазылады.Осылайша әр "td" тегінің ішінде бір немесе бірнеше кестелер енгізілуі мүмкін - осылайша парақ беті пайда болады.Және мұндай кесте арқылы сайт парақшаларын беттеу өте шыдамдылық пен ептілікті талап етеді, себебі соншама тегтерді шатаспай жазып отыру оңай жұмыс емес.

Сондықтан, қазіргі кезде көбінесе сайт беттеуде оңайлығына байланысты блоктық беттеу жиі қолданылады. 

Қалай кестелеп беттеуге болатынын тәжірибе ретінде көру үшін төменде көрсетілгендей бір-біріне орнатылған кестелер сипатталған HTML кодын Notepad редакторына көшіріп алыңыз.Егер байқаған болсаңыз, ол мен бұрын айтып қеткен "overflow" туралы сабағыма тағы да мысал бола алады.Яғни бұл "р" абзацына сиғызылған бөліктің биіктігі қысқартылып, "overflow" арқылы сипатталып, симай қалған бөлігі нұсқағышпен көрсетіліп тұр.Егер ол CSS ережесін көргіңіз келсе, мен кез келген сайт парақшасын қалай көруге болатыны туралы жазған парақшама тағы бір оралып қарап алыңыз :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Кестелеп беттеу</title>
</head>
<body>
<table width=600px bgcolor=#00ff00>
<tr><th>1-th тегі</td><th>2-th тегі</td><th>3-th тегі</td></tr>
<tr><td>
<table width=200px bgcolor=#ffff00>
<tr><td>1-кесте</td><td>1-кесте</td><td>1-кесте</td></tr>
</table>
</td><td>
<table width=200px bgcolor=#ff0000>
<tr><td>2-кесте</td><td>2-кесте</td><td>2-кесте</td></tr>
</table>
</td><td>
<table width=200px bgcolor=#87ceff>
<tr><td>3-кесте</td><td>3-кесте</td><td>3-кесте</td></tr>
</table>
</td></tr>
<tr><td>
<table width=200px bgcolor=#a020f0>
<tr><td>4-кесте</td><td>4-кесте</td><td>4-кесте</td></tr>
</table>
</td><td>
<table width=200px bgcolor=#ffff00>
<tr><td>5-кесте</td><td>5-кесте</td><td>5-кесте</td></tr>
</table>
</td><td>
<table width=200px bgcolor=#fec0cb>
<tr><td>6-кесте</td><td>6-кесте</td><td>6-кесте</td></tr>
</table>
</td></tr>
</table>
</body>
</html>

Енді Денвер арқылы болмаса, осы файлдың өзін түртіп жіберіп нәтижесін тамашалайық:

 

Меніңше, нәтиже тамаша болған сияқты.

Егер мақала көңіліңізден шықса, онда онымен төмендегі түйме арқылы достарыңызбен бөлісіңіз

Пікірлер