Отправляет email-рассылки с помощью сервиса Sendsay

Программирование на JavaScript: просто о сложном.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Всё о работе в Интернет" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

  Апрель 2005   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Владимир

Статистика

1.761 подписчиков
0 за неделю
←   Все выпуски   →

Программирование на JavaScript: просто о сложном.


Информационный Канал Subscribe.Ru

ГЛАВНАЯ     УЧЕБНИК     СКРИПТЫ    



ВЫПУСК 5

Принципы гипертекстовой разметки. Структура документов

Средства описания таблиц в HTML

По мере роста системы WWW стало ясно, что средств, которые заложены в НТМL, не достаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (таг <PRE>), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выделялась из общего стиля документа.

Таг <ТАВLЕ>.

Для описания таблиц служит таг <ТАВLЕ>. Таг <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.

Таг <ТR>

Таг <ТR> (сокращение от Таble Row - строка таблицы) создает строку таблицы. Если в таблице содержится два набора тагов <ТR></ТR>, в ней будут две строки. Весь текст, другие таги и атрибуты, которые вы хотите поместить в одну строку, должны быть помещены между тагами <ТR></ТR>.

Пример 1.10 

  <HTML>  

 <BODY>  

 <H1 ALIGN=CENTER>Таблица</H1> 
 <CENTER>  

 <TABLE BORDER>  

 <TR>  
 <TD COLSPAN=3>Если в таблице два тага <TR> то в ней две строки.</TD>  

 </TR> 

  <TR>  

 <TD>Если в строке три тага <TD> </TD> 

 <TD>то в ней </TD>  

 <TD>три столбца.</TD>  

 </TR> 

  </TABLE>  

 </CENTER>  

 </BODY>  
 </HTML>

Таг <ТD>

Внутри строки таблицы обычно размещаются ячейки с данными, Каждая ячейка, содержащая текст или изображение, должна быть окружена тагами <ТD></ТD>. Число тагов <ТD></ТD> в строке определяет число ячеек. Строка с пятью парами тагов <ТD></ТD> будет состоять из пяти ячеек.

Пример 1.11 

  
<HTML>  
 <BODY>  

 <TABLE BORDER> 

 <TR>  

 <TD>В</TD>  

 <TD>этой</TD>  

 <TD>строке</TD>  

 <TD>пять</TD>  

 <TD>столбцов</TD>  

 </TR> 

  <TR> 
 
 <TD>а в этой</TD>  
 <TD>только</TD>  

 <TD>три.</TD> 

 </TR>  

 </TABLE>  

 </BODY>  
 </HTML>

Таг <ТН>

При задании заголовков для столбцов и строк таблицы используются таг заголовка <ТН></ТН> (Таblе Неаder, заголовок таблицы). Эти таги аналогичны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между тагами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD></ТD> с тагом <В> и атрибутом <АLIGN=CENTER>, текст тоже будет выглядеть как заголовок. Однако, следует иметь в виду, что не все броузеры поддерживают жирный шрифт в таблицах, поэтому лучше задавать заголовки таблиц с помощью <ТН>.

Пример 1.12 

  
<HTML>  
 <BODY>  

 <TABLE BORDER>  

 <TR>  

 <TH>Заголовок центрирован по умолчанию</TH>  

 <TH COLSPAN=2>Заголовок может объединять столбцы</TH>  

 </TR>  

 <TR>  

 <TH>Заголовок может быть расположен перед столбцами</TH>

  <TD>Текст или данные</TD>  

 <TD>Текст или данные</TD>  

 </TR> 

  <TR>  

 <TH ROWSPAN=3> Заголовок может объединять строки</TH> 

 <TD>Текст или данные</TD>  

 <TD>Текст или данные</TD>  

 </TR>  

 <TR> 

  <TD>Текст или данные</TD> 
  <TD>Текст или данные</TD>  

 </TR>

  <TR>   

<TD>Текст или данные</TD>  

 <TD>Текст или данные</TD>  

 </TR> 

  </TABLE>  
 </BODY>  

 </HTML>

Таг <САРТIОN>

<CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=ТОР>), либо под таблицей (<САРТION ALIGN=ВОТТОМ>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда таг <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда таг <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

Пример 1.13 

  <HTML>  
 <BODY>  

 <TABLE BORDER>  

 <CAPTION ALIGN=TOP>Заголовок над таблицей</CAPTION> 

 <TR>

   <TD>Текст или данные</TD>  

 <TD>Текст или данные</TD>  

 <TD>Текст или данные</TD>   

<TD>Текст или данные</TD>  

 </TR>  

 </TABLE>  

 <TABLE BORDER>  

 <CAPTION ALIGN=BOTTOM>Заголовок под таблицей</CAPTION> 
 <TR> 

  <TD>Текст или данные</TD>  

 <TD>Текст или данные</TD>   <TD>Текст или данные</TD>  

 <TD>Текст или данные</TD>  

 </TR>   
</TABLE>  

 </BODY>  

 </HTML>

Атрибут NOWRAP

Обычно любой текст в таблице, не помещающийся в одну строку ячейки, переходит на следующую строку. Однако, при использовании атрибута NOWARP с тагами <ТН> или <ТD> длина ячейки расширяется на столько, чтобы, заключенный в ней текст поместился в одну строку.

Атрибут СОLSPAN=

Таги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN= (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN=, чтобы растянуть ее над любым количеством обычных ячеек.

Пример 1.14 

  <HTML>  

 <BODY>  

 <CENTER>  

 <TABLE BORDER=3>  

 <TR>  

 <TD>
   Если вы хотите сделать какую-нибудь 
ячейку шире, чем верхняя или нижняя,   </TD>  

 <TD>   можно воспользоваться атрибутом СОLSPAN=,  </TD> 

  </TR>  

 <TR>  

 <TD BGCOLOR=WHITE COLSPAN=2> 

 чтобы растянуть ее над любым количеством обычных ячеек.  </TD>  

 </TR>  

 </TABLE>  

 </CENTER>  

 </BODY>  

 </HTML>

Атрибут ROWSPAN=

Атрибут ROWSPAN=, используемый в тагах <ТD> и <ТН>, аналогичен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN= число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Нельзя поместить ее внизу таблицы.

Атрибут WIDТН=

Атрибут WIDТН= применяется в двух случаях. Можно поместить его в таг <ТАВLЕ> для задания ширины всей таблицы, а можно использовать в тагах <ТR> или <ТН> для задания ширины ячейки или группы ячеек. Ширину можно указывать в пикселях или в процентах. Например, если вы задали в таге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселей независимо от размера страницы на мониторе. При задании WIDТН=50% в таге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в пикселях имейте в виду, что если у вашего читателя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселями и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы могут оказаться полезными.

Пример 1.15 

  <HTML>  

 <BODY>  

 <TABLE BORDER WIDTH=100%>  

 <TR> 

  <TD ALIGN=CENTER>Текст или данные - ширина 100% 

 </TR>  

 </TABLE>
или
   <TABLE BORDER WIDTH=50%>  

 <TR> 

  <TD 

ALIGN=CENTER>Текст или данные - ширина 50%</TD> 

 </TR> 

  </TABLE>
или
   <TABLE BORDER WIDTH=200>  

 <TR>  

 <TD 
ALIGN=CENTER>Текст или данные - ширина 200 пикселей</TD> 

 </TR>  

 </TABLE>
или
   <TABLE BORDER WIDTH=100> 

  <TR>  

 <TD 
ALIGN=CENTER>Текст или данные - ширина 100 пикселей</TD>  

 </TR>  

 </TABLE> 
  </BODY>  

 </HTML>

Атрибут UNIТ=

Атрибут UNIT= тага <ТАВLЕ> определяет единицы измерения, используемые при указании размеров как всей таблицы, так и ее отдельных столбцов. Атрибут UNIТ= может принимать три значения:

UNIТ=ЕN - это значение присваивается по умолчанию и задает единицу измерения, равную еn-пробелу. Еn-пробел - это типографская единица измерения, равная ширине буквы <n>. Реальный размер пробела зависит от выбранного шрифта: для крупного шрифта еn-пробел больше, чем для мелкого. Обычно еn-пробел равен половине размера шрифта. Например, при использовании 12-пунктового шрифта ширина еn-пробела будет 6 пунктов. Для 8-пунктового шрифта еn-пробел занимает 4 пункта.

UNIТ=RELATIVE используется для задания относительной ширины столбцов в процентах от общей ширины таблицы. Этот способ следует по возможности применять вместо указания ширины в процентах UNIТ=RELATIVE выполняет ту же функцию, но поддерживается большим количеством броузеров.) При задании относительных (RELATIVE) единиц вводимые числа воспринимаются как ширина столбцов в процентах.

UNIТ=РIXELS - это значение применяется, когда вам нужно точно знать ширину столбца на экране. В этом случае лучше всего задать ее в пикселях. Например, таг <ТАВLЕ UNIТ=РIXELS WIDTH=340> сформирует таблицу шириной 340 пикселей.



А сейчас - новый скрипт:

Таймер 

   

<html>
<title>Таймер</title>
<head>
<script>
 startday = new Date();
clockStart = startday.getTime();

function initStopwatch() 
{ 
 var myTime = new Date(); 
        var timeNow = myTime.getTime();  
        var timeDiff = timeNow - clockStart; 
        this.diffSecs = timeDiff/1000; 
        return(this.diffSecs); 
} 

function getSecs() 
{ 
        var mySecs = initStopwatch(); 
        var mySecs1 = ""+mySecs; 
        mySecs1= mySecs1.substring(0,mySecs1.indexOf(".")) + " сек."; 
        document.forms[0].timespent.value = mySecs1 
        window.setTimeout('getSecs()',1000); 
}

</script>
</head>
<body onLoad="window.setTimeout('getSecs()',1)">
<CENTER><font size=+1>Таймер</font><hr></CENTER>
<CENTER><form>
Вы пробыли на этой странице уже  
<input size=9 name=timespent>
</form>

На этом на сегодня все.
До встречи в следующих выпусках.
Владимир.

javascript05@narod.ru
http://subscribe.ru/
http://subscribe.ru/feedback/		 Подписан адрес:
Код этой рассылки: inet.webbuild.javascript05		 Отписаться
В избранное