Добавление изображения в ячейку td. Почти стандартный режим
В этой лекции подробно рассматриваются принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.
Средства описания таблиц в HTML
По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег
), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.Создание таблиц в HTML
Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.
Создание строки таблицы - тег <ТR>
Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами lt;ТR>.
Определение ячеек таблицы - тег <ТD>
Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD>. Число тегов <ТD> в строке определяет число ячеек
Таблица
Если в таблице два тега TR, то в ней две строки. Если в строке три тега TD, то в ней три столбца. Заголовки столбцов таблицы - тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.
| Заголовок центрирован по умолчанию | Заголовок может объединять столбцы | |
|---|---|---|
| Заголовок может быть расположен перед столбцами | Текст или данные | Текст или данные |
| Заголовок может объединять строки | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | |
| Текст или данные | Текст или данные | |
Использование заголовков таблицы - тег <САРТIОN>
Тег
| Текст или данные | Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.
| Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, | можно воспользоваться атрибутом СОLSPAN=2, |
| чтобы растянуть ее над любым количеством обычных ячеек. | |
Атрибут ROWSPAN
Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.
| Текст или данные - ширина 100% |
| Текст или данные - ширина 50% |
| Текст или данные - ширина 200 пикселов |
| Текст или данные - ширина 100 пикселов |
Применение пустых ячеек
Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.
Атрибут СЕLLРАDDING
Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
Атрибуты АLIGN и VALIGN
Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:
ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.
ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
АLIGN=сеnter располагает содержимое ячейки по центру.
АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:
VALIGN=top выравнивает содержимое ячейки по ее верхней границе.
VALIGN=middle центрирует содержимое ячейки по вертикали.
VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.
| Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. | верх, | середина, | низ. |
| VALIGN=top Выравнивает содержимое ячейки по ее верхней границе. | верх, | верх, | верх. |
| VALIGN=middle Центрирует содержимое ячейки по вертикали. | середина, | середина, | середина. |
| VALIGN=bottom Выравнивает содержимое ячейки по ее нижней границе. | низ, | низ, | низ. |
Атрибут BORDER
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Атрибут CELLSPACING
Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные |
Атрибут BGCOLOR
Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
Атрибут BACKGROUND
Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.
Использование таблиц в дизайне страницы
Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования "пустого пространства", что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.
Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью
Уральский государственный педагогический университетДобро пожаловать!
|
Создание разноцветных таблиц
Некоторые браузеры позволяют отображать цвета. Есть несколько способов раскрасить таблицу, в основном они зависят от используемого браузера.
Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:
Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.
Л юбая таблица в HTML представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Создавать таблицы в HTML достаточно просто, необходимо лишь представить себе конечную модель. В языке HTML таблицы используются не только для представления данных, их можно применять для размещения текстовых блоков, изображений и т.д. на web-странице, т.е. с их помощью можно создавать макет самой страницы.
Элемент TABLE, создаем таблицу
Для создания таблиц в языке HTML применяется элемент table , а весь код (ее содержимое) таблицы располагается между тегами . Атрибуты этого элемента задают значения для всей таблицы целиком:
- background - задается изображение (URL), которое может быть фоном для всей таблицы;
- bgcolor - цвет фона таблицы, задается если не задан фон в виде изображения;
- border - толщина линий таблицы, если неободимы видимые границы;
- bordercolor - цвет линий таблицы;
- cellpadding - расстояние от текста внутри ячеек до границ ячеек;
- cellspacing - расстояние от границ таблицы до внешних границ ячеек (внутри таблицы);
- width - задается значение ширины таблицы в px или % .
Пишем пример кода таблицы с голубым фоном, толщиной лини в 1px белого цвета, отступами внутри и снаружи ячеек по 2px, шириной 100% от страницы:
bgcolor="blue"
border
="1"
bordercolor
="white"
cellpadding
="10"
cellspacing
="2"
width
="100%"
>
Добавляем строку
В каждой таблице должна быть хотя бы одна строка, задается она тегами . В следующем примере смотрим пример добавления строки:
bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >
Добавляем ячейки
Ячейки образуют вертикальные столбцы таблицы, обозначаются они тегами . Добавляем к нашей таблице ячейки:
bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >
Ячейка №1
Ячейка №2
Ячейка №3
В увидим получившуюся таблицу:
Объединение строк
В некоторых случаях может потребоваться растянуть один столбец на несколько строк, для этого применяется атрибут rowspan , значение которого определяет количество строк, необходимых для объединения. Смотрим пример:
bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >
rowspan="2"
>Строки №1 и №2 объединены
Ячейка№1
Ячейка№2
Ячейка №3
Ячейка №4
Строка №3
Ячейка №5
Ячейка №6
Браузер отобразит:
| Строки №1 и №2 объединены | Ячейка№1 | Ячейка№2 |
|---|---|---|
| Ячейка №3 | Ячейка №4 | |
| Строка №3 | Ячейка №5 | Ячейка №6 |
Объединение столбцов
Столбцы объединяются по такому же принципу, только с использованием атрибута colspan . Смотрим пример:
bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >
colspan="2"
>Столбцы №1 и №2 объединены
Столбец №3
Ячейка №1
Ячейка №2
Ячейка №3
Ячейка №4
Ячейка №5
Ячейка №6
Браузер отобразит:
Атрибуты colspan и rowspan можно применять одновременно. В браузере это будет выглядеть так:
Или вот так:
А ты попробуй написать код самостоятельно!
Размеры и выравнивание таблицы
Высоту и ширину можно задавать как для всей таблицы в целом, так и для отдельных строк и столбцов делается это спомощью уже знакомых атрибутов width и height , значения задаются как в пикселях, так и в процентах.
Выравнивание таблицы по горизонтали задается атрибутом align , значения тебе уже знакомы: left, center, right . А для того чтобы выровнять текст в ячейках таблицы, атрибут горизонтального выравнивания align необходимо применить к каждому тегу td . С применением CSS это гораздо упрощается. Для вертикального выравнивания содержимого ячеек применяется атрибут valign . Он так же имеет свои значения - вертикальное выравнивание по центру middle , по верху top и по низу bottom базовой линии (линией, на которой расположен текст текущей строки).
Фон таблицы
Фоновое изображение или цвет можно так же задать как для всей таблицы, так и для отдельно взятой ячейки, все зависит от того какие цели ты преследуешь. Задается это - для изображения - атрибутом background , в значении которого прописывается путь к необходимому графическому файлу. Для цветового фона - атрибутом bgcolor , здесь значением является наименование цвета.
В заключение
Вот вобщем и все, что необходимо для начального уровня. По окончании раздела о построении таблиц в HTML, заканчивается твое первое знакомство с языком HTML. С помощью таблиц в HTML можно создавать несложные шаблоны web-страниц, так что я предлагаю тебе создать свою первую полноценную уже прямо сейчас. Пройденного материала вполне хватит для этого. Вперед к покорению гиперпространства!
/ То, без чего не создать сайт: ∼ ∼
То таблицы играют очень важную роль в создании невидимого каркаса для веб-страницы. А это поможет равномерно и красиво расположить текст, меню, картинки и т.д.
Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы:
Итак, как в HTML сделать простую таблицу
?
Для постройки таблицы необходимо использовать три тега:
TABLE
–
этот тег нужен для открытия таблицы. Это, своего рода, контейнер, в котором содержатся другие элементы. Вот загнул так, что без пончика не разобраться. Ничего, разберетесь, когда увидите пример.
Закрывающий тег
обязателен.
Таблица состоит из ряда
| ряд 1 | ряд 1 |
| ряд 2 | ряд 2 |
| ряд 3 | ряд 3 |
| ячейка 1 | ячейка 2 |
| ячейка 1 | ячейка 2 |
| ячейка 1 | ячейка 2 |
TR – создает новый ряд таблицы. Закрывающий тег обязателен.
TD – создает новую ячейку в ряду. Закрывающий тег обязателен.
Давайте рассмотрим пример, чтобы лучше понять все выше сказанное:
| ряд 1 ячейка1 | ряд1 ячейка2 |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
| ряд 3 ячейка 1 | ряд 3 ячейка 2 |
Вот результат:
| ряд 1 ячейка1 | ряд1 ячейка2 |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
| ряд 3 ячейка 1 | ряд 3 ячейка 2 |
Давайте все объясню. Я думаю, разобрались? Если кто-то забыл, что такое атрибут border
, который я использую вместе с тегом Посмотрите парочку примеров созданных таблиц
и можно идти дальше:
Результат: Для того чтобы вставить картинку в таблицу, нужно владеть элементарными начальными знаниями о том, как вставляется изображение в HTML файл. Об этом я рассказываю в . Теперь, когда вы знаете основные нюансы об изображении в HTML, можно попробовать вставить картинку в таблицу. Это можно сделать следующим образом: в строку между тегами
Результат: Чтобы объединить ячейки в таблице, вам нужно использовать такие атрибуты:
Результат: Чтобы задать высоту и ширину таблицы, воспользуйтесь такими атрибутами: WIDTH
– ширина таблицы. Размер задается в пикселях или в процентах.
Результат: Чтобы выровнять внутри таблицы содержимое (текст, картинки), можно воспользоваться такими атрибутами: ALIGN
– горизонтальное выравнивание содержимого в таблице. VALIGN
– вертикальное выравнивание содержимого в таблице.
Результат: Можно также задать фон таблице для всех ее ячеек вместе взятых, а также для каждой ячейки по отдельности. Можно задать фон цветом, а можно и картинкой. Для фона существуют два атрибута: BGCOLOR
– цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом. Внимание:
если вы ходите задать фон цветом или фоновым рисунком всей таблице, атрибуты нужно установить в теге Для лучшего понимания посмотрите пример:
Результат: Внимание:
если картинка по размеру меньше за ячейку, тогда она будет повторяться, пока не заполнит ячейку до конца. Если картинка больше за ячейку, тогда фон картинки будет обрезан по размерам ячейки. И напоследок расскажу еще о двух полезных атрибутах
. В случае, если вам вдруг захочется увеличить расстояние между всеми ячейками, помогут следующие атрибуты: CELLPADDING
–расстояние между рамкой каждой ячейки html таблицы и содержимым в ней материалом.
Результат: CELLSPACING
–расстояние между границами соседних ячеек.
Результат: Фух, рассказал! Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте ). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей. Вот основные элементы, которые нужны для создания таблиц: Создайте документ формата HTML и скопируйте в него следующий код:
В браузере документ будет выглядеть так: Разберём, какие строчки кода за что отвечают. Каждый тег Приведем пример, html код: Обратите внимание на ячейку Теперь рассмотрим подробно все атрибуты тега К открывающему тегу 1. Свойство align="параметр"
- задает выравнивание таблицы. Может принимать следующие значения: В разобранном выше примере мы выравнивали таблицу по центру align="center"
. Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы Например
2. Свойство background="URL"
- задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения. Пример
Преобразуется на странице в следующее: В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif
. Обратите внимание на то, что в теге мы добавили style="color:white;"
. Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым. 3. Свойство bgcolor="цвет"
- задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов) 4. Свойство border="число"
- задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1"
, что означает толщина рамки - 1 пиксель. 5. Свойство bordercolor="цвет"
- задает цвет рамки. Если border="0"
, то рамки не будет и цвет рамки не будет иметь смысла. 6. Свойство cellpadding="число"
- отступ от рамки до содержимого ячейки в пикселях. 7. Свойство cellspacing="число"
- расстояние между ячейками в пикселях. 8. Свойство cols="число"
- число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы. 9. Свойство frame="параметр"
- как отображать границы вокруг таблицы. Может принимать следующие значения: 10. Свойство height="число"
- задает высоту таблицы: либо в пикселях, либо в процентах. 11. Свойство rules="параметр"
- где отображать границы между ячейками. Может принимать следующие значения: 12. Свойство width="число"
- задает ширину таблицы: либо в пикселях, либо в процентах. 13. Свойство class="имя_класса"
- можно указать имя класса, которому принадлежит таблица. 14. Свойство style="стили"
- стили можно задать индивидуально для каждой таблицы. Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге 1. Свойство align="параметр"
- задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения: 2. Свойство background="URL"
- задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения. 3. Свойство bgcolor="цвет"
- задает цвет фона ячейки. 4. Свойство bordercolor="цвет"
- задает цвет рамки ячейки. 5. Свойство char="буква"
- задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char. 6. Свойство colspan="число"
- задает число объединяемых горизонтальных ячеек. 7. Свойство height="число"
- задает высоту таблицы: либо в пикселях, либо в процентах %. 8. Свойство width="число"
- задает ширину таблицы: либо в пикселях, либо в процентах %. 9. Свойство rowspan="число"
- задает число объединяемых вертикальных ячеек. 10. Свойство valign="параметр"
- выравнивание содержимого ячейки по вертикали. Для тега В случае использования border (граница ячеек) и нулевых отступов между ячейками, они все равно склеиваются и получается удвоенный border . Чтобы это избежать нужно прописать в стилях таблице border-collapse: collapse
: Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.
Перед каждым созданием новой таблицы открывается тег
.
Дальше, размещаем в середине контейнера
тег
.
, что говорит о начале нового ряда.
.
В этом ряду вставляем две ячейки с содержанием при помощи тега
ряд 1 ячейка1
ряд1 ячейка2
Закрываем ряд тегом
Открываем другой ряд тегом
.
Закрываем ряд тегом
Открываем третий ряд тегом
и вставляем в него снова две ячейки.
.
Закрываем ряд тегом
Закрываем таблицу тегом
, напоминаю, что это толщина рамки. Если в border
будет установлено значение «0»
, тогда границы таблицы будут невидимые.
ряд 1 ячейка 1
ряд 2 ячейка 1
вставить изображение.
ряд 1 ячейка 1
ряд 1 ячейка 2
ряд 1 ячейка 1
ряд 1 ячейка 2
А как объединить ячейки в таблице?
COLSPAN
– определяет количество столбцов.
По умолчанию значение 1.
ROWSPAN
– определяет количество рядов.
По умолчанию значение 1.
объединяем ячейки
в верхнем ряду с помощью атрибута colspan
:
ряд 1 ячейка 1+2
ряд 2 ячейка 1 ряд 2 ячейка 2
Как установить размер таблицы?
HEIGHT
– высота таблицы. Размер задается в пикселях или в процентах.
ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2
Выравнивание содержимого в таблице
К атрибуту ALIGN
присваивается значения: left
(по умолчанию)
, center
,
right
.
left
-
прижать содержимое к левой части;
center
–
установить по центру;
right
-
прижать содержимое к правой части
К атрибуту VALIGN
присваивается значения: top
, bottom
, middle
.
top
–
прижать содержимое к верху;
bottom
–
прижать содержимое к низу;
middle
–
установить содержимое посередине
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
Как сделать фон таблицы?
BACKGROUND
–фон в таблице заполняется рисунком.
. А если только к определенной ячейке, тогда в тег
.
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
ряд 1 ячейка1
ряд1 ячейка2
ряд 2 ячейка 1
ряд 2 ячейка 2
Надеюсь, с задачей я справился и доступно объяснил все, что я знал про html таблицы
. А вам, рекомендую хорошо закрепить материал.
Попробуйте создать собственную таблицу, а лучше целый каркас для веб-страницы из таблицы html.
Всего вам хорошего!
Спасибо, что посетили мой блог Теги и атрибуты таблиц
- контейнер, внутри которого располагается таблица (такой же, как
для маркированных или
для нумерованных списков).
, вне ячеек и строк.
- парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
- тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках - обычно текст внутри
обозреватель выделяет жирным и размещает по центру.
- контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег
, столько ячеек в ней и будет: один тег - одна ячейка.
.
Пример создания таблицы
Назначение Инструмент
Разметка HTML XHTML
Оформление CSS
Разработка PHP Python
находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно.
- открыли таблицу, задав ей толщину рамок.
- закрыли таблицу.
- открыли строку.
- закрыли строку. Аналогично создали остальные строки.
Назначение
- создали ячейку с оформлением заголовка.
Инструмент
- создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
- добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
Разметка
HTML
XHTML
создает новую строку. Далее во вложенных
создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки.
Как сделать таблицу в html
Пример таблицы
Столбец 1
Столбец 2
. Мы используем специальный атрибут colspan
для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег
(заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.
.
Атрибуты и свойства тега
можно прописывать различные атрибуты.
или строкам
. Таким образом, в разных ячейках выравнивание будет разное.
...
...
...
Пример таблицы
Столбец 1
Столбец 2
.
Атрибуты и свойства
и
Примечание 1
доступны такие же параметры, что и для . Параметры для одного тега будут иерархично применены ко всем внутри него
Как сделать, чтобы границы ячеек в таблице не склеивались
...
Загрузка...Возможно вам будет интересно:
Последние статьи
