www.popularsite.ru

RESTOR- От HTML до С++

Объявление

HTML

JavaScript

CSS

Flash MX
   

Содержание Курса(Введение в HTML)

     

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » RESTOR- От HTML до С++ » Основы работы с HTML » 4. Лекция: Таблицы

4. Лекция: Таблицы

Страница: 1 2  
Тема закрыта

Сообщений 1 страница 10 из 17

1

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

В web-дизайне таблицы являются одним из основных методов структурирования информации. Они представляют данные в виде удобных для восприятия колонок и строк, что значительно упрощает анализ информации. С их помощью можно легко отделить одну часть страницы от другой. Таблицы в настоящий момент являются пожалуй основным элементом дизайна Web-страниц.

Основным тегом для обозначения таблицы является <table>. Элемент TABLE представляет собой тэг-контейнер, в котором размещается содержимое таблицы. Построение таблицы осуществляется по строкам, для обозначения которых применяется контейнер TR. Внутри контейнера строк помещаются контейнеры для обозначения ячеек. Стандарт HTML определяет два типа контейнеров для обозначения ячеек <th> и <td>. Первый предназначен для обозначения заголовков, а второй для данных в ячейках. Отличие этих двух элементов заключается лишь в том как их содержимое отображается браузером, заголовки большинство браузеров выделяют полужирным шрифтом и центрируют в своих ячейках. Ячейка данных может содержать текст, изображения, списки, параграфы, формы, горизонтальные линейки, таблицы и т. д.

0

2

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Примеры

Рассмотрим вышеизложенное на примерах различного вида таблиц.
<html>
<body>

<p>
Каждая таблица начинается с тега table.
Каждая строка таблицы начинается с тега tr.
Каждый элемент данных таблицы начинается с тега td.
</p>

<h1>Это пример простейшей таблицы, содержащей одну строку и одну ячейку.</h1>
<table border="1">
<tr>
  <td>Одна строка и одна ячейка</td>
</tr>
</table>

<h1>Одна строка и три столбца:</h1>
<table border="1">
<tr>
  <td> столбец 1</td>
  <td> столбец 2</td>
  <td> столбец 3</td>
</tr>
</table>

<h1>Две строки и три столбца:</h1>
<table border="1">
<tr>
  <td>1.1</td>
  <td>1.2</td>
  <td>1.3</td>
</tr>
<tr>
  <td>2.1</td>
  <td>2.2</td>
  <td>2.3</td>
</tr>
</table>

</body>
</html>

<h1>Рамка таблицы</h1>

<html>
<body>
<h1>Обычная рамка:</h1>
<table border="1">
<tr>
  <td>Первая</td>
  <td>строка</td>
</tr>   
<tr>
  <td>Вторая </td>
  <td>строка</td>
</tr>
</table>

<h1>Толстая рамка:</h1> 
<table border="10">
<tr>
  <td>Первая</td>
  <td>строка</td>
</tr>   
<tr>
  <td>Вторая </td>
  <td>строка</td>
</tr>
</table>

</body>
</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>

Примерl

0

3

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Для тега table определены следующие аттрибуты.

align - определяет способ горизонтального выравнивания таблицы на странице. Возможные значения: left, center, right. Значение по умолчанию - left.
valign - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.
border - определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.
cellpadding - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
cellspacing - определяет расстояние (в пикселах) между границами соседних ячеек.
width - определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
height - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
bgcolor - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
background - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

Ячейки таблицы без содержимого в большинстве браузеров выводятся не очень хорошо. Если необходимо сделать ячейку таблицы пустой, то разместите в ней неразрывный пробел &nbsp;

Такие элементы как <thead>,<tbody> и <tfoot> используются редко в связи с тем, что не все браузеры их поддерживают.

Для тегов <td> и <th> очень полезными являются атрибуты colspan и rowspan. Первый показывает сколько ячеек надо объединить по горизонтали, а второй по вертикали. Следует заметить, что если мы применяем объединение ячеек, то общее число ячеек с учетом объединенных должно быть равным. Продемонстрируем на примере.

0

4

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

<html>
<body>

<h4>Правильное применение colspan:</h4>
<table border="1">
<tr>
  <td colspan="2">100</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>Неправильное применение colspan:</h4>
<table border="1">
<tr>
  <td colspan="2">100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>Правильное применение rowspan:</h4>
<table border="1">
<tr>
  <td rowspan="2">100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>Неправильное применение rowspan:</h4>
<table border="1">
<tr>
  <td rowspan="2">100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>
</body>
</html>

Пример

0

5

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Дополнительные примеры

Таблица без рамки

<html>
<body>

<h4>Эта таблица не имеет рамки:</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<h4>И эта таблица не имеет рамки:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>

0

6

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Заголовки в таблице

<html>
<body>

<h4>Заголовки таблицы:</h4>
<table border="1">
<tr>
  <th>Имя </th>
  <th>Телефон </th>
  <th>Телефон </th>
</tr>
<tr>
  <td>Калиткин</td>
  <td>202 55 55 </td>
  <td>456 77 84 </td>
</tr>
</table>

<h4>Вертикальные заголовки:</h4>
<table border="1">
<tr>
  <th>Фамилия:</th>
  <td>Калиткин</td>
</tr>
<tr>
  <th>Телефон :</th>
  <td>202 55 55</td>
</tr>
<tr>
  <th>Телефон:</th>
  <td>456 77 84</td>
</tr>
</table>

</body>
</html>

0

7

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Пустые ячейки

<html>
<body>

<table border="1">
<tr>
  <td>Некоторый текст </td>
  <td>Некоторый текст </td>
</tr>
<tr>
  <td></td>
  <td>Некоторый текст </td>
</tr>
</table>

<p>
Как можно видеть, одна из ячеек не имеет рамки.
Это потому, что она пустая. Попробуйте вставить в ячейку пробел.
Она по-прежнему не будет иметь рамки.
</p>

<p>
Хитрость состоит в том, чтобы вставить в ячейку неразрывный пробел.
</p>

<p>Неразрывный пробел является символьным объектом.
</p>

<p>Объект неразрывного пробела начинается с амперсанда ("&"),
затем следуют буквы "nbsp", и в конце стоит точка с запятой (";")
</p>

<p>
</p>

</body>
</html>

0

8

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Заглавие таблицы

<html>
<body>

<h4>
Эта таблица имеет заглавие
и толстую рамку:
</h4>

<table border="6">
<caption>Заглавие</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>

0

9

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Ячейки таблицы, которые охватывают более одной строки/столбца

<html>
<body>

<h4>Ячейка, которая охватывает два столбца:</h4>
<table border="1">
<tr>
  <th>Организация</th>
  <th colspan="2">Телефон</th>
</tr>
<tr>
  <td>Интернет-Университет Информационных Технологий</td>
  <td>253-9312</td>
  <td>253-9313</td>
</tr>
</table>

<h4>Ячейка, которая охватывает две строки:</h4>
<table border="1">
<tr>
  <th>Организация:</th>
  <td> Интернет-Университет Информационных Технологий </td>
</tr>
<tr>
  <th rowspan="2">Телефон:</th>
  <td>253-9312</td>
</tr>
<tr>
  <td>253-9313</td>
</tr>
</table>

</body>
</html>

0

10

  • Автор: Admin
  • Администратор
  • Admin
  • Зарегистрирован: 2009-03-11
  • Приглашений: 0
  • Сообщений: 347
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    8 часов 2 минуты
  • Последний визит:
    2009-04-16 13:45:24

Теги внутри таблицы

<html>
<body>
<table border="1">
<tr>
  <td>
   <p>Это параграф </p>
   <p>Это другой параграф </p>
  </td>
  <td>Эта ячейка содержит таблицу:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>Эта ячейка содержит список
   <ul>
    <li>элемент 1</li>
    <li>элемент 2</li>
    <li>элемент 3</li>
   </ul>
  </td>
  <td>КОНЕЦ</td>
</tr>
</table>

</body>
</html>

0

Тема закрыта
Страница: 1 2  

Вы здесь » RESTOR- От HTML до С++ » Основы работы с HTML » 4. Лекция: Таблицы

Рейтинг форумов | Создать форум бесплатно