Интернет-технологиялар

Тәжірибелік жұмыс 7

Нөлге тең, атрибут cellspacing пайдалана отырып кестенің ұяшықтар арасында кеңістік жойыңыз:

Ұяшықтар арасындағы кеңістікті арттырыңыз, мүмкін, cellspacing = «5» болсын.

Атрибут cellpadding, ұяшықтың жоғарғы, төменгі, сол және оң жолдарында орнатады.

Енді cellpadding="5" атрибутын сұрайсыз:

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

Үлкен кесте берілген, екі бағаны мәтінмен жиналса, арасындағы үшінші жай ғана тұр:

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

Бұл кестеде интернетте неше бұқ бақ бар екенін көрсетеді:

бұқтар	65% бар
бақтар	20% бар
басқасы.	15% бар

<table>
<tr>
<td width="200" valign="top" background="blue.gif" align="center"> Интернетте күн сайын көбірек бук және бяк пайда. Бұл қазіргі заманғы қоғам дамуындағы рөлі айқын, бірақ соған қарамастан, олардың болуы байқалады . Бяктар және буктер қалыпты адам ретінде оларға сілтеме кезде өздері үшін арнайы емдеуді қажет ететін, бяктар сізге түсінікті болмайды.</td>
<td width="10" background="white.gif"> </td>
<td width="200" valign="top" background="blue.gif" align="center"> Мұна кесте , бяк және интернет бойынша басқа да мекендейді көрсетеді.:
<br><br>
<table cellspacing="3">
<tr>
<td width="50" background="white.gif">буки</td><td background="white.gif">65% населения</td>
</tr>
<tr>
<td width="50" background="white.gif">бяки</td><td background="white.gif">20% населения</td>
</tr>
<tr>
<td width="50" background="white.gif">др.</td><td background="white.gif">15% населения</td>
</tr>
</table>
<br><br>
За сим все</td>
</tr>
</table>

Назар аударыңыз!

background="картинка.gif" .Атрибуте bgcolor үстел үшін өң түсін (жолдар, жасуша ) белгілейді, және фондық атрибут кестенің фондық сурет (жолдар , жасуша ) орнатады.

Егер IE (Internet Explorer) Кірістірілген кестелер үшін bgcolor атрибутын көрсетеді , қандай да бір басқа браузерлер көрсету енгізілген кестелер үшін Бұл төлсипатты бас тартуға , сондықтан сіз фон бастап айналма жолын өту керек.

<td width="10" background="white.gif"> </td>
Ұяшық бос болмау үшін, ол енгізілген шығармалар жарияланатын; (резидент - үзілу бос орын таңбасы арнайы таңба болып табылады). Бұл жай ғана емес. Құрылымы түрін пайдаланып қонақтар бар фактісі: <td></td>.

Міне, кейбір браузерлері жай ескермеу дизайн, т.б.

3 пиксель жақтауын сұраныс жасаңыз

border рамка параметр енгізу.
<table border="3">
Кестенің қалған өздерін жазыңыз. Бұл осылай көрсетіледі.:

Рамкамен кесте

Рамканың түсін орнату. <table border="3" bordercolor="#000000">

Рамкамен кесте

Бір түсті рамканы жасаңыз (қара). Осы кестеде сіз басқа кестені қоюға - соңында ол кірістірілген кесте айналасында пиксель қалыңдығы жақтауын қалыптасады екен.

Үш жолдар , бірінші және соңғы бар негізгі кестені жасаңыз - біздің кадрлар жоғарғы және төменгі ( жиектері ) болып табылады. Екінші жол үш жасушаларының бөлінеді : бірінші және соңғы ( олар тиісті қалыңдығы және қажетті түсті белгілеу ) жақтаудың жүздері болады . Ал екінші жол ұяшық ортасындағы қалаған мазмұны (мысалы жаңалықтар ) бар кірістірілген кесте шешіңдер . Үзік жақтауын жасау. Бұл бірінші және үшінші қатарда , және біздің басты кестенің бірінші және үшінші ұяшықта фонда қойылады нүктелерден тұратын сызық , суретке жасайды .

Кесте берілген. Толық бет жасау үшін оның негізінде.

Оларға қажетті тегтер мен атрибуттар енгізіңіз ::

<html>
<head>
<title>Мой первый кестемен сайт</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>

Үстел биіктігі мен ені жауапты атрибуттары өзгертіңіз. 700 пиксель бүкіл кестеде ені сұраңыз . Жасушаларының ені жалпы сомасы 700 пиксел аспауы тиіс : 300+ = 700 400 . Тек екі жасушаларының енін орнатыңыз , себебі оған сәйкес 400 пиксел бірдей өздері оқшауланып қалған жасушаларды таратуға.

<html>
<head>
<title> Менің кестелермен алғашқы сайт </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">
Мен жақында виртуалды өмірін оқып ) бастады , бірақ мен ұзақ дәстүр болды , тым , олар менің фотосуреттерді көруге болады, сондықтан менің қонақтар желілерінің бірнеше тастай , маған оқып туралы , менің жаңа онлайн таныстары мен достары үй бет жасау үшін келді.<br><br> Ал мүмкін жай ғана кездейсоқ келуші кенеттен менімен кездесуге келеді, және мен < б > басқа виртуалды бірі болады ?:) </b><br><br> Суретте : (а) I. Сурет сапасы өкінішке орай , өте жақсы емес, сондықтан ол анық емес болып табылады және менің тұлға ерекшеліктері сәл проблемалы қараңыз. Бірақ бүкіл көп Мен толық екенін:) <br><br> Сіз де солай ойлаймын болса, онда , кафе popem жылы кесе шай чат :) Кім біледі , мүмкін біз нақты өмірде дос болып жатыр , тың қандай да бір кездесейік:)
</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>

Кестеде мәтінді енгізіңіз . Тег DIV пайдаланып солға мәтінді туралаңыз. Үстелдер тег орталығын пайдалана отырып, экранның ортасында орналасқан. Кесте үшін cellpadding атрибут енгізіңіз..

Екінші бағанға атағы және мазмұнын енгізіңіз. Ұяшықтың жоғарғы жағындағы мәтін мен суреттерді (төлсипат енгізілмесе, valign егер әдепкі , ұяшық орталығында орналасқан мазмұнын ) орналастырыңыз. Қалған екі ұяшықтар үшін мазмұнын енгізіңіз :

<html>
<head>
<title> Менің кестелермен алғашқы сайт </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> Менің бетке қош келдіңіз!</h3>
</div>
</td>
<td width="300" bgcolor="#336699" rowspan="2" valign="top">

<div align="center"><img src="primtocodephoto.gif" alt="моя фотография"><br><br><img src="ptimtocodephoto2.gif" alt="моя фотография"></div>
</td>
</tr>
<tr>
<td bgcolor="#336699">
<div align="center"><a href="mailto:admin@postroika.ru">напиши мне письмо</a></div>
</td>
<td bgcolor="#FFCC33">
<div align="center"><a href="#">посмотри мои фотографии</a></div>
</td>
</tr>
</table>
</center>
</body>
</html>

Соңғы екі жасушалары , пошта жәшігіңізге сілтеме мәтінді енгізіңіз , chtobyposetitel сізге фотосуреттермен хат және бетті жазған еді.
<a href="#"> … </a> - фотографиямен құжатқа жолы тіркелген жоқ екенін ескеріңіз , ал оның орнына белгішесін торын алмастыруға . Естеріңізге сала кетейік , тор белгішесі бет ішіндегі бетбелгілер жасау үшін пайдаланылады. Бұл жағдайда , бетбелгі аты көрсетілмесе , және беттің өзінде бетбелгілер емес болып табылады. Бұл сіз тіркелген осындай біртүрлі сілтемені басыңыз кезде , сіздің келуші сіздің бетіне өтіңіз емес екенін білдіреді. бос сілтеме болып табылады. Ол сіздің беттен * .html құжаттардың атаулары қандай болады белгілі емес , тіпті мұндай сілтемелер кодеры жиі , сайттың макеті қолданылады.