Кестелер
Басқа үйренген тектерден басқа, сіз өщдіңіздің веб-бетіңізге өз кестеңізді енгізе аласыз, және бәрін үйрене отырып, сізге кестенің маңызды екенін айтамын. Кестені қолдана отырып, сіз белгілі бір ақпаратты, тарифтік кестені немесе кезекшілік кестесін, ойыңызға байланысты мақсаттарға қолдануға болады, кестенің құрылуы жайында алдағы уақытта…
Кестені сызу
<table> -бұл ашылуы </table>-бұл жабылуы, бұл сізге түсінікті деп ойлаймын, кез-келген кесте жолдар мен бағандардан тұрады, ол үшін тағы екі тег бар:
<tr> – Кесте жолы
<td> – Кесте бағаны
Бұл тегтер бірге жазылады, кестеде ұяшық бар, ал ол ұяшықта бағандар бар:
<table>
<tr>
<td>Аты: </td>
<td>Тегі: </td>
</tr>
</table>
Бірінші баған | Екінші баған |
Сары түстегі шекара таблица, қызыл түсте біздің бағандар орналасқан.
Бұл ең кішкентай кесте, ішінде тек екі баған ғана бар. Төменде үш жолдан және әрбір жол үш бағаннан құралған, сонымен бізге көрнекілік қосатын border атрибуттын қосамыз.
<html>
<head>
<title>
Кесте
</title>
</head>
<body>
<table border=»1″>
<tr>
<td>
бірінші ұяшық, бірінші баған
</td>
<td>
бірінші ұяшық, екінші баған
</td>
<td>
бірінші ұяшық, үшінші баған
</td>
</tr>
<tr><td>
екінші ұяшық, бірінші баған
</td>
<td>
екінші ұяшық, екінші баған
</td>
<td>
екінші ұяшық, үшінші баған
</td>
</tr>
<tr>
<td>
үшінші ұяшық, бірінші баған
</td>
<td colspan=»2″>
үшінші ұяшық, екінші баған
</td>
<td>
үшінші ұяшық, үшінші баған
</td>
</tr>
</table>
</body>
</html>
Сізде нәтиже дұрыс шықта ма? Онда ары қарай….
Ұяшықтарды біріктіру
Шын мәнінде “біріктіру” –орынсыз қолданылған, мен оны тек сіз түсінсіз деген жағдайда ғана жасадым. Сол Word бағдарламасын есіңізде сақтаңыз, оған кесте қосып, қажетті ұяшықтарды таңдап, «обьединить» түймесін басыңыз, Мұнда бәрі дұрыс емес, » обьединить » емес, «растянуть»деп айту дұрысырақ болар еді. Бұл ақпарат мына атрибуттарды білдіреді, colspan және rowspan.
- colspan – бағанның қанша бағанның ұзындығын алатынын жазу үшін.
- rowspan – Ұяшық алатын жолдар санын енгізі үшін.
Біздің мысалда екінші және үшінші жолда «біріктіру» керек делік
үшінші ұяшық, ол үшін colspan атрибутына 2 мәнін беріңіз (екі бағанға созыңыз)
және оны тегтің ішіне атрибут ретінде салыңыз.
<html>
<head>
<title>
Кесте
</title>
</head>
<body>
<table border=»1″>
<tr>
<td>
бірінші ұяшық, бірінші баған
</td>
<td>
бірінші ұяшық, екінші баған
</td>
<td>
бірінші ұяшық, үшінші баған
</td>
</tr>
<tr><td>
екінші ұяшық, бірінші баған
</td>
<td>
екінші ұяшық, екінші баған
</td>
<td>
екінші ұяшық, үшінші баған
</td>
</tr>
<tr>
<td colspan=»2″>
үшінші ұяшық, екінші баған
</td>
<td>
үшінші ұяшық, үшінші баған
</td>
</tr>
</table>
</body>
</html>
Көріп отырғаныңыздай, ұяшық екі бағанға созылды, сонымен бірге үшінші ұяшықты жылжытты, бізге оны жою қажет емес. Арнайы мен осы әрекеттің принципін түсіну үшін осы қателікке жол бердім.
Түзетілген мысал:
бірінші ұяшық, бірінші баған | бірінші ұяшық, екінші баған | бірінші ұяшық, үшінші баған |
екінші ұяшық, бірінші баған | екінші ұяшық, екінші баған | екінші ұяшық, үшінші баған |
үшінші ұяшық, бірінші баған | үшінші ұяшық, екінші баған |
Енді атрибутты қолдана отырып, бүкіл бірінші бағанды бір ұяшыққа біріктіруге тырысайық
rowspan, дәлірек айтқанда, бірінші бағанның бірінші жолының ұяшығын үш жолға және осы уақытқа созыңыз, қалған ұяшықтардың бірінші бағандарын өшіріп шығамыз.
<html>
<head>
<title>
Кесте
</title>
</head>
<body>
<table border=»1″>
<tr>
<td rowspan = «3»>
бірінші ұяшық, екінші баған
</td>
<td>
бірінші ұяшық, үшінші баған
</td>
</tr>
<tr><td>
екінші ұяшық, екінші баған
</td>
<td>
екінші ұяшық, үшінші баған
</td>
</tr>
<tr>
<td>
үшінші ұяшық, екінші баған
</td>
<td>
үшінші ұяшық, үшінші баған
</td>
</tr>
</table>
</body>
</html>
бірінші ұяшық, екінші баған | бірінші ұяшық, үшінші баған |
екінші ұяшық, екінші баған | екінші ұяшық, үшінші баған |
үшінші ұяшық, екінші баған | үшінші ұяшық, үшінші баған |
Барлығы оңай, тек барлығына мұқият назар аудару.
Кесте өлшемі.
Егер сіз кестені өз бетіңізше сурет салумен айналысқан болсаңыз, онда сіз міндетті түрде өзгерттіңіз
назар аударыңыз, кесте мен ұяшықтардың өлшемдері әдепкі бойынша
мәтінді.. және олар өздері қалағандай «қозғалады». width– мен height – биіктігі атрибуттары туралы ойланыңыз,
біз сызбаларды созу үшін қолданған, олар <table>тегтеріне де қолданылады,
<tr > және <td>. Сіз бұл атрибуттармен таныссыз, сондықтан мен көп айтпайымын.. жай ғана мысал келтірер болсам, Онда кестенің және оның жеке ұяшықтарының өлшемдері, сонымен бірге бүкіл кесте ортаға жылжыту үшін <center> тегі.
<html>
<head>
<title>
Кесте
</title>
</head>
<body>
<center>
<table border=»1″ width=»640″ height=»480″>
<tr>
<td width=»150″>
бірінші ұяшық, бірінші баған
</td>
<td height=»30″>
бірінші ұяшық, екінші баған
</td>
<td height=»30″>
бірінші ұяшық, үшінші баған
</td>
</tr>
<tr><td>
екінші ұяшық, бірінші баған
</td>
<td>
екінші ұяшық, екінші баған
</td>
<td>
екінші ұяшық, үшінші баған
</td>
</tr>
<tr>
<td>
үшінші ұяшық, бірінші баған
</td>
<td>
үшінші ұяшық, екінші баған
</td>
<td>
үшінші ұяшық, үшінші баған
</td>
</tr>
</table>
</center>
</body>
</html>
бірінші ұяшық, бірінші баған | бірінші ұяшық, екінші баған | бірінші ұяшық, үшінші баған |
екінші ұяшық, бірінші баған | екінші ұяшық, екінші баған | екінші ұяшық, үшінші баған |
үшінші ұяшық, бірінші баған | үшінші ұяшық, екінші баған | үшінші ұяшық, үшінші баған |
Ұзындығы мен ені барлық ұяшықтар үшін берілмегеніне назар аударыңыз. Ал неге? Егер кесте ең кең және ұзын ұяшықтарға тураланады.. онда ол және кесте… Әлі бәрі айтылып біткен жоқ.. Кестеде width және height атрибуттарының мәндері тек пикселдерде ғана емес, сонымен қатар пайызбен көрсетілуі мүмкін.
Міне мысал:
<html>
<head>
<title>
Кесте
</title>
</head>
<body>
<center>
<table border=»1″ width=»640″ height=»480″>
<tr height=»25%»>
<td height=»15%»>
бірінші ұяшық, бірінші баған
</td>
<td height=»25%»>
бірінші ұяшық, екінші баған
</td>
<td height=»60%»>
бірінші ұяшық, үшінші баған
</td>
</tr>
<tr height=»50%»><td>
екінші ұяшық, бірінші баған
</td>
<td>
екінші ұяшық, екінші баған
</td>
<td>
екінші ұяшық, үшінші баған
</td>
</tr>
<tr height=»25%»>
<td>
үшінші ұяшық, бірінші баған
</td>
<td>
үшінші ұяшық, екінші баған
</td>
<td>
үшінші ұяшық, үшінші баған
</td>
</tr>
</table>
</center>
</body>
</html>
бірінші ұяшық, бірінші баған | бірінші ұяшық, екінші баған | бірінші ұяшық, үшінші баған |
екінші ұяшық, бірінші баған | екінші ұяшық, екінші баған | екінші ұяшық, үшінші баған |
үшінші ұяшық, бірінші баған | үшінші ұяшық, екінші баған | үшінші ұяшық, үшінші баған |
Бұл мысалда кестенің жалпы ені 640 пиксельден бірінші ұяшыққа 15% бердік, 25% екінші және 60% үшінші. Ал биіктігі бойынша 480 пиксельден 25% бірінші және үшінші жолда, а екінші орынның жақсы жартысы.. Қысқасы, әлемде әділеттілік жоқ.. Ия, бұл сізге байланысты, қанша орынды иеліктен шығару керек, ең бастысы-бұл 100%, әйтпесе шатасулар болады.
Кестені пайдаланып, веб-бет жасау.
Бұл мысалды кестеден қараңыз, ол сізге ештеңе еске түсірмейді ме??
<html>
<head>
<title>
Веб-бетке дизайн сызу
</title>
</head>
<body><center>
<table border=»1″ width=»640″ height=»480″>
<tr>
<td colspan=»5″ height=»30″>
<center>
Тақырып
</center>
</td>
</tr>
<tr>
<td height=»30″ width=»20%»>
<center>
батырма1
</center>
</td>
<td width=»20%»>
<center>
батырма2
</center>
</td>
<td width=»20%»>
<center>
батырма3
</center>
</td>
<td width=»20%»>
<center>
батырма4
</center>
</td>
<td width=»20%»>
<center>
батырма5
</center>
</td>
</tr>
<tr>
<td valign=»top»>
Мазмұны:
</td>
<td colspan=»4″><center>
Көп мәтін
</center>
</td>
</tr>
</table>
</center>
</body>
</html>
Тақырып
|
||||
батырма1
|
батырма2
|
батырма3
|
батырма4
|
батырма5
|
Мазмұны: |
Көп мәтін
|
Көріп отырғаныңыздай, кесте бетті орналастыру үшін жақсы және ең бастысы ыңғайлы инструменттер. Кестенің кез-келген ұяшығы басқаларымен толтыру үшін тәуелсіз бола алады мәтіндік мазмұны бар, сондай – ақ белгілі бір жеке қасиеттерге ие – атрибуттар. Осы уақытқа дейінгі білімді кестеге қолдана отырып, басынан өткен материалды жаңартып алайық. Мен мысалдармен көрсетемін, біз бұған жеттік..
<html>
<head>
<title>
Кесте және бояулар
</title>
</head>
<body>
<center>
<table width=»300″ height=»300″>
<tr>
<td bgcolor=»#c0e4ff»>
1
</td>
<td bgcolor=»#c5ffa0″>
2
</td>
<td bgcolor=»#c0e4ff»>
3
</td>
</tr>
<tr>
<td bgcolor=»#c5ffa0″>
4
</td>
<td bgcolor=»#ffa0c5″>
5
</td>
<td bgcolor=»#c5ffa0″>
6
</td>
</tr>
<tr>
<td bgcolor=»#c0e4ff»>
7
</td>
<td bgcolor=»#c5ffa0″>
8
</td>
<td bgcolor=»#c0e4ff»>
9
</td>
</tr>
</table>
</center>
</body>
</html>
Нәтиже:
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
Мәтіндерді туралау:
Мұнда жаңа valign атрибуты пайда болады-тік(вертикаль) туралау. Осы кезге дейін бізге align атрибуты – Көлденең(горизонталь) туралау белгісі болды.
<html>
<head>
<title>
Кестеде туралау
</title>
</head>
<body>
<center>
<table width=»300″ height=»300″>
<tr>
<td bgcolor=»#c0e4ff» valign=»top»>
1
</td>
<td bgcolor=»#c5ffa0″ valign=»top»>
<center>
2
</center>
</td>
<td bgcolor=»#c0e4ff» align=»right» valign=»top»>
3
</td>
</tr>
<tr>
<td bgcolor=»#c5ffa0″>
4
</td>
<td bgcolor=»#ffa0c5″>
<center>
5
</center>
</td>
<td bgcolor=»#c5ffa0″ align=»right»>
6
</td>
</tr>
<tr>
<td bgcolor=»#c0e4ff» valign=»bottom»>
7
</td>
<td bgcolor=»#c5ffa0″ valign=»bottom»>
<center>
8
</center>
</td>
<td bgcolor=»#c0e4ff» align=»right» valign=»bottom»>
9
</td>
</tr>
</table>
</center>
</body>
</html>
1 |
2
|
3 |
4 |
5
|
6 |
7 |
8
|
9 |
Енді жаңа атрибут туралы…
Cellspacing-кесте ұяшықтары арасындағы пиксельдегі қашықтықты орнату үшін. cellspacing=»0″ ұяшықтар арасындағы алшақтықтан арылуға болады.
<html>
<head>
<title>
Ұяшықтар арасындағы қашықтық
</title>
</head>
<body>
<center>
<table width=»300″ height=»300″ cellspacing=»15″>
<tr>
<td bgcolor=»#c0e4ff» valign=»top»>
1
</td>
<td bgcolor=»#c5ffa0″ valign=»top»>
<center>
2
</center>
</td>
<td bgcolor=»#c0e4ff» align=»right» valign=»top»>
3
</td>
</tr>
<tr>
<td bgcolor=»#c5ffa0″>
4
</td>
<td bgcolor=»#ffa0c5″>
<center>
5
</center>
</td>
<td bgcolor=»#c5ffa0″ align=»right»>
6
</td>
</tr>
<tr>
<td bgcolor=»#c0e4ff» valign=»bottom»>
7
</td>
<td bgcolor=»#c5ffa0″ valign=»bottom»>
<center>
8
</center>
</td>
<td bgcolor=»#c0e4ff» align=»right» valign=»bottom»>
9
</td>
</tr>
</table>
</center>
</body>
</html>
1 |
2
|
3 |
4 |
5
|
6 |
7 |
8
|
9 |
Cellpadding атрибуты (cellspacing – пен шатастырмаңыз) – пиксельде ұяшықтар өрісі пайда болады (шегініс мәтінге дейінгі ұяшықтар шекарасы)
<html>
<head>
<title>
Кесте өрістері
</title>
</head>
<body>
<center>
<table width=»300″ height=»300″ cellspacing=»0″ cellpadding=»25″>
<tr>
<td bgcolor=»#c0e4ff» valign=»top»>
1
</td>
<td bgcolor=»#c5ffa0″ valign=»top»>
<center>
2
</center>
</td>
<td bgcolor=»#c0e4ff» align=»right» valign=»top»>
3
</td>
</tr>
<tr><td bgcolor=»#c5ffa0″>
4
</td>
<td bgcolor=»#ffa0c5″>
<center>
5
</center>
</td>
<td bgcolor=»#c5ffa0″ align=»right»>
6
</td>
</tr>
<tr>
<td bgcolor=»#c0e4ff» valign=»bottom»>
7
</td>
<td bgcolor=»#c5ffa0″ valign=»bottom»>
<center>
8
</center>
</td>
<td bgcolor=»#c0e4ff» align=»right» valign=»bottom»>
9
</td>
</tr>
</table>
</center>
</body>
</html>
1 |
2
|
3 |
4 |
5
|
6 |
7 |
8
|
9 |
Бөлек, мүмкін, кірістірілген кестелерге назар аудару керек,
мен әрбір жеке ұяшық басқаларға арналған контейнер бола алады деп айттым.
тегтер.. <table > тегі де ерекшелік емес. Шын мәнінде, сіз бір кестені екіншісінің ішіне енгізе аласыз..
Мысалды қараймыз…
<html>
<head>
<title>
Ішкі кесте
</title>
</head>
<body>
<center>
<table width=»600″ height=»400″ border=»1″>
<tr>
<td colspan=»2″>
<center>
Тақырып
</center>
</td>
</tr>
<tr>
<td valign=»top»>
Мазмұны:
</td>
<td valign=»top»>
<center>
<br><br>
Кестелер бір ұяшыққа салынған!!
<br><br><br>
<table width=»200″ height=»200″ cellspacing=»0″ cellpadding=»15″>
<tr>
<td bgcolor=»#c0e4ff» valign=»top»>
1
</td>
<td bgcolor=»#c5ffa0″ valign=»top»>
<center>
2
</center>
</td>
<td bgcolor=»#c0e4ff» align=»right» valign=»top»>
3
</td>
</tr>
<tr>
<td bgcolor=»#c5ffa0″>
4
</td>
<td bgcolor=»#ffa0c5″>
<center>
5
</center>
</td>
<td bgcolor=»#c5ffa0″ align=»right»>
6
</td>
</tr>
<tr>
<td bgcolor=»#c0e4ff» valign=»bottom»>
7
</td>
<td bgcolor=»#c5ffa0″ valign=»bottom»>
<center>
8
</center>
</td>
<td bgcolor=»#c0e4ff» align=»right» valign=»bottom»>
9
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
</body>
</html>
Тақырып
|
||||||||||
Мазмұны: |
Кестелер бір ұяшыққа салынған!!
|
Көп әрі ұзын код … қиын болды ма? Рас? Мүмкін, бір қарағанда солай көрінері анық, бірақ бекер емес, мен көптеген мысалдар келтірдім! Егер бір нәрсе түсініксіз болса, алдыңғы мысалдарды қайталаңыз, жай ғана оқып қана қоймай, редакторға енгізіп нәтижені сезініңіз, тәжірибе жасаңыз,
Тәжірибе-сәттіліктің кепілі.
Әдеттегідей барлығын қорытындылаймыз, сонымен сізде қандай парақ бар? Менде былай:
<html>
<head>
<title>
Менің алғашқы сайтым
</title>
</head>
<body text=»#484800″ bgcolor=»#ffffff» background=»graphics/fon.jpg»>
<center>
<table width=»640″ height=»480″ cellpadding=»5″ cellspacing=»2″ border=»1″>
<tr>
<td colspan=»3″ height=»30″ bgcolor=»#b2ff80″><center>
<img src=»graphics/privet.png» width=»200″ height=»40″ alt=»Сәлем әлем!!!»>
</center>
</td>
</tr>
<tr>
<td height=»30″ width=»33%» bgcolor=»#ffa0cf»>
<center>
<b>
Мен жайында
</b>
</center>
</td>
<td width=»33%» bgcolor=»#c0e4ff»><center><b>Мұнда менің суретім!!</b></center></td>
<td bgcolor=»#c0e4ff»><center><b>Маған хат жазыңыз…</b></center></td>
</tr>
<tr>
<td colspan=»3″ valign=»top» bgcolor=»#b2ff80″>
<p align=»justify»>
<img src=»image/log.jpg» align=»left» hspace=»10″ width=»100″ height=»90″ alt=»бұл менің суретім!!!» title=»Бұл менің суретім!!»>
Бағдарламалық тілдерде символдарды бірізділікпен өңдеуге қажет мәтіндер алдын ала жазылып кояды, мәтіндерді бұйрықты тапсырма деп қарауға болады. Семантикалық шарттары бойынша мәтіндер мынадай деңгейлерде сұрыпталады: дербес мағынасы жоқ әліпби таңбалары; шағын тіл бірліктерінің екі жақты атаулары; мағынасы бұйрық түрінде емес атаулардың қосындысын білдіретін сөйлемшелер; белгілі әрекетті білдіретін (бұйрық мағынасында) синтаксистік құрылымдардан тұратын операторлар тағы басқа. Бағдарламалық тілдердің өзіне тән сипаты — символдық, сөздік, сөйлемдік, мәтіндік деңгейлердің ара жігі белгісіздігінде мәтіндерді жазып, ЭЕМ-ге енгізуде ондағы жетімсіздік басқа символдармен толықтырылады. </p>
<p> Бағдарламалау тілінің сыртқы формасы синтаксис ретінде белгілі. Бағдарламалау тілдерінің басым көпшілігі текстік. p>
<p> Машиналық-бағдарланған Бағдармалау тілі өзінің мәліметтерінің түрі мен алгоритмінің құрылуы бойынша белгілі бір ЭЕМ-нің (не ЭЕМ класының) құрылымын бейнелейді.!</p>
<p> Процедуралық-бағдарланған бағдармалау тілі — белгілі бір мәселелер класын шешу бағдарламасын сипаттауға арналған тіл. Бұл тілде мамандар кәсіптік терминдер түрінде ЭЕМ үшін тапсырмалар құрастыра алады, әрі онда мәселені шешу үшін орындалатын нақты қадамдар міндетті түрде көрсетіледі p>
<center><b> Бұл тілде мамандар кәсіптік терминдер түрінде ЭЕМ үшін тапсырмалар құрастыра алады, әрі онда мәселені шешу үшін орындалатын нақты қадамдар міндетті түрде көрсетіледі. !!</b></center>
<p> Процедуралық-бағдарланған бағдармалау тілі — белгілі бір мәселелер класын шешу бағдарламасын сипаттауға арналған тіл. …</p>
</td>
</tr>
</table></center>
</body>
</html>
Пайдалы кеңестер
- Үлкен күрделі кестелерді жасау кезінде алдымен оларды қағазға салуды ұсынамын (бастаушы болсаңыз). Сонымен оның жалпы көрінісін елестету, жолдар мен бағандар санын есептеу, көру ыңғайлы болады осы немесе басқа ұяшықтарды қандай ұяшықтан және қанша мөлшерде «біріктіру» керек.
- Сіздің парағыңыздың өлшемдерін таңдағанда, әсіресе оның еніне қатысты (width атрибуты), 640 үшін 480, 800 үшін стандартты монитор ажыратымдылықтарына назар аударыңыз 600, 1024-тен 768-ге дейін … бірақ ең бастысы, әр түрлі пайдаланушылар олардың мониторлары мен көру қабілеті әртүрлі рұқсаттарға ие және егер сіз көрсеткен өлшемдер болса олардың шеңберінен шығып, сәйкесінше мұндай пайдаланушылардың экрандарында пайда болады жолақтың жылжуы. Тік жолақ-бұл жаман емес, тышқанның пайдасын ойлап тапты және жоғарыдан төменге емес, солдан оңға қарай жазады.. бірақ көлденең жолақ айналдыру бетті оқу кезінде айтарлықтай қолайсыздықтар тудырады.. Сондықтан мен беттің үлкен енін көрсетіңіз деп кеңес бермеймін. Менің ойымша, ені 1024 пиксель оңтайлы болады көлемі … дегенмен … өздеріңіз шешесіздер…
7 comments
Wow, marvelous weblog structure! How lengthy have you been running
a blog for? you make running a blog glance easy.
The entire glance of your site is wonderful, as neatly as the content material!
You can see similar here sklep internetowy
Good article and right to the point. I don’t know if this is
truly the best place to ask but do you people have any thoughts on where to employ some professional writers?
Thank you 🙂 Najlepsze escape roomy
Very interesting info!Perfect just what I was searching
for!!
Good article. I absolutely appreciate this site. Keep writing!
A fascinating discussion is definitely worth comment. I think that you ought to write more on this subject, it may not be a taboo subject but typically people do not discuss such topics. To the next! Best wishes!
Pretty! This was a really wonderful article. Many thanks for supplying this info.
It’s hard to come by experienced people about this topic, however, you seem like you know what you’re talking about! Thanks