Сайтқа ену

Оқулықтар

Интернетке орналастыру

Оқулық-бағдарламалар

Матфизика есептерінің шешімдері

Html кестелері

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

Сайттың жоғарғы жағы (логотип және басқалары)

Сілтеме 1

Сілтеме 2

Сілтеме 3

Сілтеме 4

Сілтеме 5

Неізгі мазмұн

Жарнама және басқалары

Сайт туралы

Жай кестені қалай құруды талдап көрейік. Ол үшін бізге үш элемент керек болады.

TABLE - html таблицы кесте құруға арналған элемент. Бастапқы және соңғы тегтері бар. Әдетте html кесте рамкасыз болады, ал белгілеу автоматты орындалады ондағы ақпараттың орналасу көлеміне байланысты. Бұл жерде BORDER атрибуты пикселмен берілген рамканың қалыңдығын береді.

TR (Table Row) – Жаңа кесте құрады.

TD (Table Data) - html кестенің әрбір ұяшасын бастайды және аяқтайды.

Екі жол, екі бағаннан тұратын кесте құралық:

<table border="1">
<tr>
<td> қатар 1 ячейка1</td> <td> қатар 1 ячейка2</td>
</tr>
<tr>
<td> қатар 2 ячейка 1</td> <td> қатар 2 ячейка 2</td>
</tr>
</table>

Браузерде:

қатар 1 ячейка1

қатар 1 ячейка2

қатар 2 ячейка 1

қатар 2 ячейка 2

Бұл жерде <table>, < tr> тегтері қолданылды, ал ячейкалар үшін <td> тегі қолданылды

Ячейкаларды біріктіру

Ол үшін мына атрибуттер қолданылады.

COLSPAN бағандар санын анықтайды. Әдепкі мәні 1.

ROWSPANқатар санын анықтайды. Әдепкі мәні 1.

Мысал 1:

<table border="1">
<tr>
<td colspan="2"> қатар 1 ячейка 1+2</td>
</tr>
<tr>
<td> қатар 2 ячейка 1</td> <td> қатар 2 ячейка 2</td>
</tr>
</table>

Получим в браузере:

қатар 1 ячейка 1+2

қатар 2 ячейка 1

қатар 2 ячейка 2

Пример 2:

<table border="1">
<tr>
<td rowspan="2">Ячейка 1, ряд 1+2</td>
<td> қатар 1 ячейка2</td>
</tr>
<tr>
<td> қатар 2 ячейка 2</td>
</tr>
</table>

браузерде:

Ячейка 1, қатар 1+2

қатар 1 ячейка2

қатар 2 ячейка 2

Мұнда күрделе ештеңе жоқ.

Тағы пайдалы атрибуттер:

CELLPADDINGhtml кестесі әрбір ячейка рамкасы мен ондағы материалдың арасындағы қашықтықты пикселмен берілген анықтайды.

CELLSPACINGhtml кестесінің көршілес ячейкаларының шекараларының арасындағы қашықтықты анықтайды.

WIDTHhtml кестесінің енін анықтайды. Ені не пикселмен, не процентпен, браузер терезесінің еніне қатысты беріледі. Әдепкіде бұл атрибут кестедегі материалдың көлеміне қатысты автоматты анықталады.

HEIGHTкестенің биіктігін анықтайды. Биіктің браузер терезесінің биіктігіне қатысты не пикселмен, не процентпен беріледі. Әдепкіде бұл атрибут кестедегі материалдың көлеміне қатысты автоматты анықталады.

Мысал 1:

<table border="1" cellpadding="10">
<tr>
<td> қатар 1 ячейка1</td><td> қатар 1 ячейка2</td>
</tr>
<tr>
<td> қатар 2 ячейка 1</td> <td> қатар 2 ячейка 2</td>
</tr>
</table>

Результат в браузере:

қатар 1 ячейка1

қатар 1 ячейка2

қатар 2 ячейка 1

қатар 2 ячейка 2

Пример 2:

<table border="1" cellspacing="10">
<tr>
<td> қатар 1 ячейка1</td><td> қатар 1 ячейка2</td>
</tr>
<tr>
<td> қатар 2 ячейка 1</td> <td> қатар 2 ячейка 2</td>
</tr>
</table>

Результат в браузере:

қатар 1 ячейка1

қатар 1 ячейка2

қатар 2 ячейка 1

қатар 2 ячейка 2

Пример 3:

<table border="1" width="400" height="100">
<tr>
<td> қатар 1 ячейка1</td><td> қатар 1 ячейка2</td>
</tr>
<tr>
<td> қатар 2 ячейка 1</td> <td> қатар 2 ячейка 2</td>
</tr>
</table>

браузерде:

қатар 1 ячейка1

қатар 1 ячейка2

қатар 2 ячейка 1

қатар 2 ячейка 2

Соңғы төрт атрибут:

ALIGNhtml кестені немесе ондағы ячейканы көлденең теңестіру әдісін анықтайдыүмкін мәндері: left, center, right. Әдепкі мәніleft.

VALIGNhtml кестені немесе ондағы ячейканы тік теңестіру әдісін анықтайды. Мүмкін мәндері: top, bottom, middle.(жоғары қарай қысу, төменге қарай және ортасына орналастыру).

BGCOLORкесте ячейкасы фон түсін анықтайды. Оналтылық жүйеде не RGB-мәнмен, не 16 базалық түспен анықталады.

BACKGROUND кесте фонын суретпен толтыруға мүмкіндік жасайды. Мән ретінде URL суреттің мәнін көрсету керек.

Ескерту: кестенің әрбір ячейкасына фон түсі мен фондық суретті беруге болады. Бірақ: егер сіз TABLE базалық элементке фондық түс (немесе сурет) беретін болсаңыз, онда барлық ячейкаларда оыс фон (сурет) болады, және егер сіз қандай да бір ячейкада ауыстырғыңыз келсе, осы ячейка үшін сәйкес атрибутты жазыңыз.

Мысал:

<!—центрі бойынша енін, биіктігін, қоршауын, теңестіремізу және барлық кестенің фондық түсін-->
< table width="400" height="100" border="1" align="center" bgcolor="#FFF8D2">

<tr>
<!—бұл ұяшаны әдепкідей қалдырамыз-->
<td>қатар 1 ячейка1</td>
<!—центрі бойынша мазмұнын көлденең теңестіреміз, тігінен жоғары ығыстырамыз-->
<td align="center" valign="top"> қатар 1 ячейка2</td>
</tr>
<tr>
<!— көлденең, ортасы, тігінен мазмұнды теңестірутөменге қысамыз-->
<td align="center" valign="bottom">ряд 2 ячейка 1</td>
<!-- көлденең, оң жағы бойынша, тігінен, ортасы бойынша мазмұнды теңестіру, және фондық түсті өзгертеміз-->
<td align="right" valign="middle" bgcolor="#33FF99"> қатар 2 ячейка 2</td>
</tr>

</table>

Браузерде:

қатар 1 ячейка1

қатар 1 ячейка2

қатар 2 ячейка 1

қатар 2 ячейка 2

Тағы бір мысал:

<!-- задаем ширину , высоту, рамку, фоновый цвет всей таблицы, выравнивание оставляем по умолчанию(по левому краю)-->
< table width="400" height="100" border="1" bgcolor="#FFF8D2">

<tr>
<!-- горизонтальное-по центру, вертикально по умолчанию(по центру)-->
<td align="center"> қатар 1 ячейка1 </td>
<!-- горизонтальное-по центру, вертикально по умолчанию(по центру) и делаем фоновый рисунок-->
<td align="center" background="pchela.jpg"> қатар 1 ячейка2 </td>
</tr>
<tr>
<!-- горизонтальное-по центру, вертикально по умолчанию(по центру)-->
<td align="center"> қатар 2 ячейка 1 </td>
<!-- горизонтальное-по центру, вертикально по умолчанию(по центру) и меняем фоновый цвет-->
<td align="center" bgcolor="#33FF99"> қатар 2 ячейка 2</td>
</tr>

</table>

Браузерде:

қатар 1 ячейка1

қатар 1 ячейка2

қатар 2 ячейка 1

қатар 2 ячейка 2

Егер сурет ячекадан кіші болса, онда ол мысалда көрсеткендей қайталанады. Егер үлкен болсаонда шыққан бөлігі бейнеленетін болады .

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

Қараңыз

Келесі - html формасы деген не және ол неге керек
АлдыңғыФон түсі және мәтін

Сайт бойынша іздеу

Мазмұны

Copyright © 2015 Матаев Саркытбек | Интернеттік бағдарламалар мен математика жетістіктерін жариялауға арналған сайт – www.karakoz.kz