Html границы ячеек таблицы – Учебник CSS 3. Статья «Работа с таблицами в CSS»

Содержание

Таблицы в CSS. Границы таблицы

Отображение границ ячеек

CSS позволяет установть не только стиль границы таблицы, но и стиль границ отдельных ячеек. Так как у каждой ячейки свои границы, то между соседними ячейками граница получается сдвоенная. Но существует возможность объединить границы соседних ячеек в одну. Для этого есть свойство border-collapse. Оно принимает значения:

border-collapse: separate — у каждой ячейки своя граница (по умолчанию)

border-collapse: collapse — общая граница

border-collapse: inherit — значение принимается от родительского элемента

Для примера создадим таблицу и зададим рамку ячейкам всех таблиц, которые будут на странице. Сначала не будем ничего менять, чтобы посмотреть, как таблица будет выглядеть:

Стиль:

1
2
3
4
5
6

<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<style>

7
8
9
10

td
  {
  border: 1px solid Red;
  }

HTML код:

14
15
16
17
18
19
20
21
22

<table>
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td>строка 2 ячейка 1</td>
    <td>строка 2 ячейка 2</td>
</tr></table>

Обратите внимание, у каждой ячейки своя граница. В разных браузерах CSS стиль таблицы может немного отличаться. В одних браузерах по умолчанию между ячейками есть определённое расстояние. В других границы таблицы соприкасаются.

Теперь установим таблице свойство border-collapse.

11
12
13
14

#t1
  {
  border-collapse: collapse;
  }

Границы ячеек объединились, теперь у каждой ячейки нет своей рамки, а одна рамка находится между ячейками.

Расстояние между ячейками

CSS даёт возможность установить конкретное расстояние между ячейками таблицы. Для этого используется свойтсво border-spacing. Значением свойства является расстояние в единицах измерения CSS. Это свойство не работает, если установлено свойство border-collapse со значением collapse.

Создадим ещё одну таблицу и установим расстояние между ячейками:

Стиль:

15
16
17
18

#dis 
  {
  border-spacing: 10px;
  }

HTML код:

31
32
33
34
35
36
37
38
39

<table>
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td>строка 2 ячейка 1</td>
    <td>строка 2 ячейка 2</td>
</tr></table>

Свойству border-spacing можно указать два значения через пробел. При этом, первое значение — это расстояние по горизонтали, а второе — по вертикали.

Укажем созданной таблице разные расстояния. 17 строка будет выглядеть так:

17	border-spacing: 5px 15px;

Положение заголовка таблицы

Для таблицы можно создать заголовок. Он создаётся с помощью тэга <caption>. Свойство caption-side позволяет установить положение заголовка. Оно принимает значения:

caption-side: top — над таблицей (по умолчанию)

caption-side: bottom — под таблицей

Существуют другие значения, но они поддерживаются не всеми браузерами.

Добавим второй таблице заголовок и расположим его под таблицей:

32	<caption>Заголовок таблицы</caption>

Отображение пустых ячеек

Для пустых ячеек можно запретить отображение фона и рамки. Если ячейка содержит пробел, перевод строки или табуляцию, то она всё равно считается пустой. Отмену отображения пустых ячеек устанавливает свойство empty-cells. Может принимать значения:

empty-cells: show — ячейки видны (по умолчанию)

empty-cells: hide — ячейки не видны

Создадим таблицу с пустой ячейкой. Кроме рамки, установим ячейкам фон. Пока не будем ничего менять, посмотрите, как будет выглядеть таблица.

Стиль:

19
20
21
22

#hid td
  {
  background-color: #909090;
  }

HTML код:

45
46
47
48
49
50
51
52
53

<table>
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td></td>
    <td>строка 2 ячейка 2</td>
</tr></table>

Пустая ячейка видна, у неё отображаются рамка и фон.

Теперь добавим таблице свойство empty-cells.

19
20
21
22

#hid 
  {
  empty-cells: hide;
  }

Обратите внимание, пустая ячейка не отображается в таблице

basecourse.ru

Границы HTML таблиц без CSS

Windows : Internet Explorer 3.0+, Netscape 3.04+, Opera 3.50+ [ 1 ], Mozilla 0.6+, Firefox 1.0+, Google Chrome, Safari 3.1+, SeaMonkey 1.0+.

Linux : Netscape 3.04+, Opera 5.0+, Mozilla 0.6+, Firefox 1.0+, Chromium, SeaMonkey 1.0+, Netsurf 3.0, Dillo [ 2 ].

DOS : Arachne [ 3 ].

Пример n.1:

	Границы HTML таблиц без CSS
cellspacing=»2″		bgcolor=»#ff6600″

HTML / XHTML. Код:

Пример n.2:

	Границы HTML таблиц без CSS
cellspacing=»8″		bgcolor=»#999999″

HTML / XHTML. Код:

Пример n.3 — для Netscape 3.04-6.0, Mozilla 0.6-0.92 и Arachne. Работает так же в других веб браузерах:

	Границы HTML таблиц без CSS
cellspacing=»2″		bgcolor=»#999999″

HTML / XHTML. Код:

Границы HTML таблиц без CSS

Некогда, главным образом (но не только) в 1990ые существовало несколько приемов HTML, использовавшихся, что бы добиться некоторых эффектов, которые ныне делаются с помощью CSS. Обращение с границами HTML таблиц было одним из них.

В данном случае на самом деле имеет место не обращение с границами, а его имитация через использование атрибутов cellspacing и bgcolor. В настоящее время, аналогично тому, как обстоит дело с выравниванием содержимого страницы по центру с помощью тега table, этот способ полне работающий, пусть и устаревший в плане своей концепции.

Общая идея

1. Атрибут bgcolor тега table используется для того, что бы сделать фон таблицы определенного цвета.

2. Атрибут bgcolor тега tr используется, что бы сделать фон содержимого таблицы (строки и ячейки) определенного, отличного от фона таблицы, цвета.

3. Атрибут cellspacing тега table используется, что бы создать пространство в определенное число пикселов вокруг ячеек таблицы. Это пространство получает цвет, заданный атрибутом bgcolor тега table. Поскольку он отличается от фона строк и ячеек, то это создает вокруг ячеек визуальные границы цвета фона таблицы.

Упомянутые шаги создают в Arachne визуальные границы только между ячейками таблицы, а не вокруг них. И эти шаги не создают вообще никакой визуальной границы в Netscape 3.04-6.0 и Mozilla 0.6-0.92. Так что следует добавить еще одну таблицу вокруг первой.

Атрибут bgcolor тега table убирается из внутренней таблицы и прописывается во внешней. Значение атрибута cellspacing внешней таблицы устанавливается равным «0». Это создает требуемые визуальные границы и в Arachne, и в Netscape 3.04-6.0, Mozilla 0.6-0.92.

Данный метод работает не только в Netscape 3.04-6.0, Mozilla 0.6-0.92 и Arachne, но так же в других веб браузерах, так что его можно использовать как универсальный способ.

Страница-пример для Internet Explorer 3.0 — внешний вид текста содержимого и его выравнивание по центру созданы так же без использования CSS: [ Открыть страницу-пример ] [ Cкачать в архиве ].

Internet Explorer для Windows, старые версии ( Скачать пак, содержащий Internet Explorer версий 3.0, 4.01, 5.01, 5.5, 6.0 )

Страница-пример для Netscape 3.04-6.0 и Mozilla 0.6-0.92 — внешний вид текста содержимого и его выравнивание по центру созданы так же без использования CSS: [ Открыть страницу-пример ] [ Cкачать в архиве ].

Netscape Navigator 3.04 для Windows ( Cкачать )

Netscape Communicator 4.7 для Windows ( Cкачать )

Netscape Navigator 6.01 для Windows ( Cкачать )

Mozilla 0.6 для Windows ( Cкачать )

Mozilla 0.92 для Windows ( Cкачать )

Страница-пример для Arachne — внешний вид текста содержимого и его выравнивание по центру созданы так же без использования CSS: [ Открыть страницу-пример ] [ Cкачать в архиве ].

Arachne 1.70 для DOS ( Cкачать )

Arachne 1.95 для DOS ( Cкачать )

Aliosque subditos et thema

FTP в DOS

FTP в DOS. mTCP mTCP, пакет содержащий несколько утилит, одна из которых FTP. Аналогична FTP клиенту Windows разных версий, запускаемому из командной строки. Что бы установить и использовать mTCP: 1. mTCP [ Home page ] 2. Пакетный драйвер для сетевого адаптера Ethernet: http://www.crynwr.com/drivers/ http://www.georgpotthast.de/sioux/packet.htm 3. Создать папку, например C:\DRIVERS\, куда поместить пакетный драйвер 4. Настроить сеть. Например, с помощью Microsoft Network Client 3.0 [ Перейти ] 5. Запустить пакетный драйвер, в рассматриваемом случае: C:\DRIVERS\PCIPKT.COM 0x60 6. Распаковать архив с mTCP в любую папку, например C:\SOFT\MTCP, и создать в ней файл tcp.cfg со строками: PACKETINT 0x60 HOSTNAME FTP_V_DOS Значение PACKETINT — номер прерывания, использованный при запуске пакетного драйвера. Значение HOSTNAME — любое. 7. Запустить DHCP.EXE (DHCP настроит mTCP для работы с сетью): DHCP 8. Запустить FTP: FTP [ FTP адрес / host ] Будет предложено ввести имя пользователя, после — пароль. Затем лучше перевести работу в passive mode: XFERMODE PASSIVE [ Список основных команд, поддерживаемых FTP из пакета mTCP можно найти в файле ftp.txt, содержащемся в архиве пакета программ mTCP ] Для завершения работы: QUIT mTCP — лицензия GNU GPL v3.

CSS только для Firefox

CSS только для браузера Firefox: В Firefox этот текст красного цвета HTML / XHTML. Код: <p>В Firefox этот текст красного цвета</p> CSS. Код: @-moz-document url-prefix() {p {color: #f00;}} В отличии от способа применения CSS только для Opera, по существу является хаком — поскольку правило изначально предназначалось для другой цели. Однако отсутствие поддержки в других браузерах позволяет изолировать код для использования только веб браузером Firefox. [ 1 ] Другие браузеры с движком Gecko, как SeaMonkey 1.0+ или более старый Netscape 9.0, так же поддерживают данный CSS хак. [ 2 ] Разные версии Internet Explorer, Google Chrome, Opera, Safari реагируют на хак так, как им и полагается — эти браузеры игнорируют весь код хака. [ 3 ] Есть еще один браузер, где текст становится красным — ELinks, текстовый веб браузер с некоторой поддержкой CSS.

www.kompx.com

seodon.ru | Учебник HTML — Границы, рамки и отступы HTML-таблиц

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

Мы уже выяснили с вами, что у HTML-таблиц есть рамки, хотя по умолчанию их браузеры и не показывают. Но это еще не все, у каждой ячейки таблицы тоже есть рамка, которая называется граница ячейки. Но и это еще не все, используя специальные атрибуты тега <TABLE> можно изменять расстояния между ячейками и от ячеек до рамки таблицы, а также внутренние отступы от границ ячеек до их содержимого.

Рамка HTML-таблицы, границы ячеек, расстояния между ними и внутренние отступы.

Итак, для создания рамки HTML-таблицы и границ ее ячеек используется всего один атрибут тега <TABLE> — border. Значением атрибута являются целые неотрицательные числа (ноль по умолчанию), которые означают размер в пикселях. Но, внимание, размер изменяется только у рамки таблицы, у границ ячеек он всегда неизменен.

<table border="число">...</table>

Для изменения расстояния между ячейками (их границами) и от ячеек до рамки таблицы в теге <TABLE> применяется атрибут cellspacing. Его значениями тоже могут быть только числа, отмеряющие расстояния в пикселях.

<table cellspacing="число">...</table>

Чтобы установить внутренние отступы от границ ячеек до их содержимого необходимо в теге <TABLE> использовать атрибут cellpadding. И его значения это числа, означающие пиксельные размеры.

<table cellpadding="число">...</table>

Обратите внимание, что браузеры по умолчанию устанавливают небольшие (в два пикселя) значения cellspacing и cellpadding, поэтому чтобы убрать расстояния вовсе — установите у атрибутов значения ноль (0).

Пример границ, рамок и отступов HTML-таблиц

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Границы, рамки и отступы таблиц</title>
</head>
<body>
 <p>Таблица с измененными отступами и расстояниями:</p>
 <table border="5" cellspacing="10" cellpadding="15">
  <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>
  <tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>
 </table>
 
 <p>Таблица только с установленными рамкой и границами ячеек:</p>
 <table border="5">
  <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>
  <tr><td>Ячейка 3.1</td><td>Ячейка 3.2</td><td>Ячейка 3.3</td></tr>
 </table>

 </body>
</html>

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

Таблица с измененными отступами и расстояниями:

Ячейка 1.1	Ячейка 1.2	Ячейка 1.3
Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Ячейка 3.1	Ячейка 3.2	Ячейка 3.3

Таблица только с установленными рамкой и границами ячеек:

Ячейка 1.1	Ячейка 1.2	Ячейка 1.3
Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Ячейка 3.1	Ячейка 3.2	Ячейка 3.3

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

Согласно синтаксиса HTML, браузеры прибавляют значения cellspacing и cellpadding к размерам таблицы и ее ячеек. Например, если вы установите ширину ячейки в 100 пикселей и cellpadding=»10″ — браузеры прибавят к ширине 20 пикселей (по 10 слева и справа) и она станет равна 120 пикселей. В общем, по ходу дела разберетесь.

Отступление от темы или как убрать отступы по краям страницы

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

В свое время у тега <BODY> существовало четыре атрибута, которые устанавливали размер этих отступов для каждой стороны страницы: topmargin (сверху), rightmargin (справа), bottommargin (снизу) и leftmargin (слева). Сейчас эти атрибуты устарели, поэтому будем применять стили (CSS). Итак, изменить расстояния отступов по краям страницы можно несколькими способами, я покажу вам два, а о третьем узнаете, если решите изучать CSS.

Способ первый. B теге <BODY> указать атрибут style со следующими значениями:

<body>…</body> — убирает отступы сразу со всех сторон HTML-страницы.

<body>…</body> — регулирует размер отступов для каждой стороны по часовой стрелке. Как правило используются размеры в пикселях, например: <body style=»margin:5px 3px 4px 5px»>…</body>

Второй и более удобный способ. В теге <STYLE>, с которым вы познакомились в уроке Меняем цвета ссылок, добавить еще одну строчку:

<style type="text/css">
...
body {margin:0}
</style>

Или:

<style type="text/css">
...
body {margin:сверху справа снизу слева}
</style>

Домашнее задание.

В этом уроке я тоже не буду все подробно описывать — только общие моменты. Для полноты картины посмотрите результат примера.

Создайте три таблицы, каждая должны состоять из одной строки и трех столбцов (колонок).
В первой таблице разместите Header или «шапку» страницы (не путать с «шапкой» HTML-документа), во второй — левое и правое меню, а также основное содержимое (контент), в третьей — Footer или «подвал» страницы.
Пусть ширина первого и последнего столбца каждой таблицы будет фиксированная.
Важно. Используйте тег <IMG> только для создания четырех кнопок горизонтального меню в «шапке» страницы. В остальных случаях пусть изображения идут фоном, а во вторых ячейках таблиц вообще используются только цвета, причем в первой и последней таблице это #99FF99.
Пусть текст контента страницы будет выровнен по обеим сторонам ячейки таблицы, а заголовок располагается по центру.
Что касается расстояний между ячейками таблиц, а также отступов ячеек, то думайте сами, где их надо совсем убрать, а где — увеличить.

Посмотреть результат → Посмотреть ответ

seodon.ru

Границы таблицы html

Границы таблицы html – они бывают разными! Граница может иметь различные свойства, например начертание.

Мы уже в прошлый раз касались немного темы таблиц, сегодня поговорим немного о границах таблицы…
1.

Возьмем для примера совсем простую структуру таблицы 2 строки + 2 столбца.

Для того, чтобы мы смогли увидеть границы таблицы их нужно как-то обозначить!

Как обозначается граница таблицы!?

Граница таблицы обозначается атрибутом «border». У котрого должно быть свойство — толщина и цвет.

A. Если используется такая конструкция как в ниже идущей таблице — цвет указывать необязательно -по умолчанию это черный + начертание -по умолчанию линия.

Если требуется изменить цвет, то следует добавить свойство цвета.

B. Если используются стили css, то в них требуется указать и толщину, и начертание — иначе без одного из этих свойств вы границу не увидите…

<tr>

<td >Привет</td>

<td>Привет</td>

</tr>

<tr>

<td>Текст</td>

</tr>

</table>

Результат:

Что мы здесь можем наблюдать!? Что таблица имеет двойные границы.

Как сделать одинарную границу у таблицы!?

Вообще — такая двойная линия границы смотрится, по-моему мнению очень некрасиво, давайте попытаемся сделать её в одну линию….

Добавляем в таблицу border-collapse:collapse;

2.a. Либо в таблицу записываем атрибуты таким образом:
<table border=»1″>2.b.Либо через стили css:
 

table.example{

border-collapse: collapse;

}

table.example td{

border:1px solid;

}

В таблице надо прописать класс:

<table>

Результат будет в двух случаях аналогичный:

Привет	Привет
Текст	Текст

Как сделать границу таблицы точками?

Для того, чтобы сделать границу таблицы точками вместо solid ставим dotted.

Код:

<tbody>

<tr>

</tr>

</tbody>

Результат:

Далее я не буду показывать код, наверное понятно, как это работает, мы приведем ещё несколько вариантов границ таблиц.

Сделать границу таблицы пунктирной линией.

Для того, чтобы сделать границу таблицы пунктирной линией заменяем solid на dashed

Результат:

Есть еще несколько разновидностей отображения границ таблиц, но думаю, что и такого описания будет достаточно, ну а если не достаточно, то вам поможет поиск.

Ну и напоследок… бывает такая ситуация, что требуется скрыть наружные границы таблицы — как это сдлеать!?

Скрыть наружную границу таблицы html

Стили:

table {

width: 500px;

border-collapse: collapse;

border: 2px solid white;

}

td {

padding: 3px;

border: 1px solid ;

text-align: left;

}

Таблица:

<table>
<tr>
<td>страна\год</td><td>2016</td><td>2017</td><td>2018</td>
</tr>
<tr>
<td>Россия</td><td>43</td><td>51</td><td>79</td>
</tr>
<tr>
<td>Сша</td><td>28</td><td>34</td><td>48</td>
</tr>
<tr>
<td>Германия</td><td>29</td><td>57</td><td>36</td>
</tr>
</table>

Результат:

страна\год	2016	2017	2018
Россия	43	51	79
Сша	28	34	48
Германия	29	57	36

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

границы внутри таблицы html — это уже будет тема отдельная — тема границ ячеек у таблицы.

P.S.

Данная страница – граница таблицы – была написана довольно давно, но почему-то она была такой большой и в теме про границы было напихано столько много, что можно было запутаться!

И плюс ко всему было несколько ошибок!

В общем пришлось полностью переработать страницу – практически, что написал заново!

Не забудь ! Теги:
границы таблицы html как сделать границы таблицы в html таблица html нижняя граница таблицы html задать границы таблицы html стиль границы таблицы html как скрыть границы таблицы в html html тонкие границы таблицы таблицы и границы<table> <tbody> сделать границы черныекак сделать обводку таблицы в htmlhtml таблица границы

dwweb.ru

Сетка таблицы | htmlbook.ru

Сетка представляет собой набор горизонтальных и вертикальных линий между ячейками таблицы, которые отделяют содержимое ячеек друг от друга. Сетка используется по умолчанию, если включить отображение границ с помощью атрибута border тега <table>. Однако такие линии отображаются по-разному в различных браузерах, поэтому применение стилей не только позволит удобно управлять видом таблиц, но и сделает их однотипными.

Для создания таблицы показанной на рис. 1 потребуется всего ничего: установить стилевое свойство border для каждой ячейки и воспользоваться свойством border-collapse.

Рис. 1. Вид таблицы с сеткой

При добавлении свойства border к селектору TD или TH между ячейками возникают двойные линии, которые образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло, для селектора TABLE указывается свойство border-collapse со значением collapse, как показано в примере 1.

Пример 1. Создание сетки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг содержимого таблицы */
    border: 1px solid black; /* Параметры рамки */
   }
   TH {
    background: #b0e0e6; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

В данном примере также устанавливается цвет фона для ячеек заголовка (тег <th>) через свойство background.

Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии внутри нее (рис. 2).

Рис. 2. Сетка внутри таблицы

При этом удобнее всего будет не убрать рамку, а спрятать ее, задав ей цвет, совпадающий с цветом фона веб-страницы. Так, в примере 2 фон страницы задан белым и такого же цвета используется граница, которая добавляется к селектору TABLE.

Пример 2. Таблица без внешней рамки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   BODY {
    background: white; /* Цвет фона веб-страницы */
   }
   TABLE {
    width: 300px; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
    border: 2px solid white; /* Прячем рамку вокруг таблицы */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг содержимого таблицы */
    border: 1px solid maroon; /* Параметры рамки */
    text-align: left; /* Выравнивание по левому краю */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

В данном примере толщина линий между ячейками составляет один пиксел, а белая рамка вокруг — два пиксела, т.е. на один пиксел больше. Это требуется для того, чтобы надежно скрыть внешнюю границу вокруг таблицы.

htmlbook.ru

Работа с HTML таблицами для новичков

Начиная с этого урока, я больше не буду приводить структуру всей страницы, считайте, что мы всегда работаем внутри тега body.

Блок . Структура простейшей таблицы

Я думаю, вы представляете, что такое таблица в обычной жизни — это набор строк и столбцов, на пересечении которых находятся ячейки.

В HTML таблицы создаются по похожему принципу. Там тоже есть столбцы и строки с ячейками, однако HTML код таблиц при первом взгляде может показаться непривычным.

Сама таблица имеет жесткую структуру: главным является тег <table>, внутри которого должны лежать теги <tr>, которые создают ряды (строки) таблицы, а внутри них — теги <td>, которые создают ячейки.

Как вы видите, нету тегов, которые создавали бы столбцы — таблицы создаются по рядам: сначала первый ряд, потом второй и так далее.

Изучите внимательно следующий пример с таблицей (тегу table добавлен атрибут border, который задает границу таблице и ее ячейкам):

<table border="1">
	<!--Это будет первый ряд таблицы:-->
	<tr>
		<td>Ячейка 1</td>
		<td>Ячейка 2</td>
		<td>Ячейка 3</td>
	</tr>

	<!--Это будет второй ряд таблицы:-->
	<tr>
		<td>Ячейка 4</td>
		<td>Ячейка 5</td>
		<td>Ячейка 6</td>
	</tr>

	<!--Это будет третий ряд таблицы:-->
	<tr>
		<td>Ячейка 7</td>
		<td>Ячейка 8</td>
		<td>Ячейка 9</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Блок . Ячейки-заголовки

Кроме тегов td существуют также теги <th>, которые также создают ячейки. Но это уже будут не обычные ячейки, а ячейки-заголовки, которые указывают, что находится в данном столбце (или строке) таблицы.

В следующем примере ячейки «Иван» и «Николай» должны быть обычными ячейками td, а ячейка «Имя» по логике должна быть ячейкой-заголовком th, так как «Имя» — это общее название содержимого этого столбца:

<table border="1">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Имя	Фамилия	Зарплата
Иван	Иванов	200$
Николай	Сидоров	1000$

По умолчанию текст в ячейках th будет жирный и расположен по центру (это поведение можно поменять, но об этом позже).

Блок . Атрибут cellspacing

Вы обратили внимание на то, что между ячейками есть некоторое расстояние, из-за которого видно то, что каждая ячейка имеет свою границу? Это расстояние регулируется атрибутом cellspacing. При этом, если мы не напишем этот атрибут, то его значение будет совсем не ноль (в этом случае все ячейки слиплись бы друг с другом). То есть, атрибут cellspacing по умолчанию имеет некоторое ненулевое значение, из-за которого ячейки не слипаются (это расстояние равно нескольким пикселям).

Давайте посмотрим на примере. Сейчас я увеличу отступ между ячейками до 10 пикселей:

<table border="1" cellspacing="10">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Имя	Фамилия	Зарплата
Иван	Иванов	200$
Николай	Сидоров	1000$

То, что cellspacing имеет некоторое значение по умолчанию, зачастую может мешать вам. В этом случае следует просто поставить его в ноль.

В HTML5 этот атрибут считается устаревшим (но он по-прежнему придает отступ по умолчанию). Вместо него следует использовать специальное CSS свойство, о котором мы поговорим попозже.

Если вы думаете, что вам не стоит изучать этот атрибут из-за того, что он устарел — вы ошибаетесь. В мире гораздо больше сайтов, сделанных не на HTML5, и в них вы можете столкнуться с этим атрибутом (и некоторыми другими устаревшими, которые мы будем проходить). В этом случае вам нужно знать, что это такое и как с ним работать.

Блок . Атрибут cellpadding

Атрибут cellpadding задает отступ между текстом и границей ячейки. В следующем примере я поставлю значение этого атрибута в 20px и теперь текст отойдет от границы ячеек:

<table border="1" cellpadding="20">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Имя	Фамилия	Зарплата
Иван	Иванов	200$
Николай	Сидоров	1000$

Для сравнения привожу то, как таблица будет выглядеть по умолчанию:

Имя	Фамилия	Зарплата
Иван	Иванов	200$
Николай	Сидоров	1000$

Атрибут cellpadding также имеет некоторое значение по умолчанию. Если оно вам мешает — обнулите его.

Этот атрибут, так же, как и cellspacing, считается устаревшим в HTML5.

Блок . Обнуляем cellpadding и cellspacing

Давайте обнулим cellpadding и cellspacing и посмотрим, что станет с таблицей в этом случае:

<table border="1" cellpadding="0" cellspacing="0">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Имя	Фамилия	Зарплата
Иван	Иванов	200$
Николай	Сидоров	1000$

Как вы видите, в данном случае ячейки таблицы слиплись, однако все равно заметно, что каждая ячейка имеет свою границу (то есть границы сейчас двойные). Вы сможете поправить это, когда изучите язык CSS.

Блок . Добавляем ширину и высоту

Существуют также атрибуты width и height, которые позволяют задать таблице ширину и высоту таблицы соответственно (без этих атрибутов ширина и высота таблицы регулируются ее содержимым: много текста — ширина большая, мало текста — ширина маленькая).

Посмотрите на пример их применения:

<table border="1" cellpadding="0" cellspacing="0">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Имя	Фамилия	Зарплата
Иван	Иванов	200$
Николай	Сидоров	1000$

Значениями атрибутов могут выступать пиксели или проценты. Значения в процентах задаются таким образом: width=»30%» — в этом случае таблица займет 30% ширины родителя.

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

old.code.mu

HTML. Таблицы

Мы привыкли, что таблица состоит из строк и столбцов и, вставляя таблицу в Word, мы указываем 3 столбца на 2 строки. Вставляя таблицу на HTML-страницу, сначала мы должны показать что сейчас будет таблица. Для этого воспользуемся тэгом <TABLE>. Далее указываем, что сейчас будет строка, используя тэг <TR>. А в этой строке будет три ячейки, и мы пишем три раза <TD>…</TD>.

Получим:

 <TABLE>
<TR>
<TD>…</TD>
<TD>…</TD>
<TD>…</TD>

Строка закончилась и мы должны ее закрыть </TR>.

Теперь начинается новая строка, открываем <TR>. Опять три ячейки — <TD>…</TD> записываем трижды. Строка закончилась </TR>. Таблица закончилась </TABLE>.

Получаем:

 <TABLE> /*начало таблицы*/
<TR> /*начало строки*/
<TD>…</TD> /*первая ячейка*/
<TD>…</TD> /*вторая ячейка*/
<TD>…</TD>/*третья ячейка*/
</TR> /*конец строки*/
<TR> /*начало строки*/
<TD>…</TD> /*первая ячейка*/
<TD>…</TD> /*вторая ячейка*/
<TD>…</TD>/*третья ячейка*/
</TR> /*конец строки*/
</TABLE>/*конец таблицы*/

Но при записи этого кода мы не увидим каких-либо изменений. Нет границ, нет содержимого ячеек.

Пример

 <TABLE>
<TR>
<TD>№</TD>
<TD>Фамилия</TD>
<TD>Номер телефона</TD>
</TR>
<TR>
<TD>1</TD>
<TD>Фрося Бурлакова</TD>
<TD>8-952-987-13-20</TD>
</TR>
</TABLE>

Результат

Как задать границу таблицы

Добавим границу. Для этого в <TABLE&gt; нужно указать border (граница) и ее толщину = 1.

Результат

Как изменить цвет границы

Изменим теперь цвет границы. Для этого в тэг <TABLE> нужно внести атрибут BORDERCOLOR и указать значение цвета.

Зададим цвет для границы зеленый.

 <TABLE BORDER=1 BGCOLOR=”#006600” >

Смотрим результат:

Замечание. Если при этом не будет указан размер границы отличный от нуля, то границы все равно видно не будет.

Как задать ширину таблицы

Ширина каждого столбца задается по ее содержимому. Для того чтобы изменить размер таблицы, нужно задать значение ее ширины. Увеличим размер таблицы и зададим его значение в 400 точек.

Замечание. Размер таблицы можно указывать в точках

или в процентах (в процентах от размера окна браузера)

Причем, в-первом случае размер таблицы не будет меняться, а во-втором, размер таблицы будет зависеть от размера окна браузера.

Просмотрим результат в браузере:

Как выровнять таблицу

Не всегда таблица должна располагаться по левому краю. Давайте расположим наш справочник по центру, для этого перед таблицей установим тэг <P ALIGN=”CENTER”>, а после таблицы его закроем:

 <P ALIGN="CENTER">
<TABLE BORDER=1 BorderCOLOR=”#006600”>
<TR>
<TD>№</TD>
<TD>Фамилия</TD>
<TD>Номер телефона</TD>
</TR>
<TR>
<TD>1</TD>
<TD>Фрося Бурлакова</TD>
<TD>8-952-987-13-20</TD>
</TR>
</TABLE>
</P>

Как закрасить таблицу

Давайте закрасим нашу таблицу желтым цветом. Для этого в тэге <TABLE> пропишем BGCOLOR и укажем цвет.

Наша страница будет иметь код:

 <HTML>
<HEAD>
<TITLE>Телефонный справочник </TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<TABLE BORDER=1 BorderCOLOR=”#006600” BGCOLOR="#FFFFCC">
<TR>
<TD>№</TD>
<TD>Фамилия</TD>
<TD>Номер телефона</TD>
</TR>
<TR>
<TD>1</TD>
<TD>Фрося Бурлакова</TD>
<TD>8-952-987-13-20</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>

А в браузере

Как закрасить строку

Теперь закрасим верхнюю строку (шапку) в зеленый. Мы хотим закрасить строку, поэтому и атрибут BGCOLOR должны указать в тэге TR.

 <TR BGCOLOR=”#99CC33”>

Результат

Как закрасить ячейку

Дополним нашу таблицу данными еще нескольких человек

 <HTML>
<HEAD>
<TITLE>Телефонный справочник </TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<TABLE BORDER=1 BorderCOLOR=”#006600” BGCOLOR="#FFFFCC">
<TR BGCOLOR=”#99CC33”>
<TD>№</TD>
<TD>Фамилия</TD>
<TD>Номер телефона</TD>
</TR>
<TR>
<TD>1</TD>
<TD>Фрося Бурлакова</TD>
<TD>8-952-987-13-20</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Иван Петров</TD>
<TD>8-918-964-70-11</TD>
</TR>
<TR>
<TD>3</TD>
<TD>Афоня Ивлев</TD>
<TD>8-961-594-12-45</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>

Результат

Теперь давайте закрасим столбец с нумерацией. Так как в HTML нет понятия столбец, то на первый взгляд это выглядит затруднительно. Но на самом деле все довольно просто: в каждой строке нужно закрасить первую ячейку. То есть в тэге <TD> прописать атрибут BGCOLOR и указать цвет

 <HTML>
<HEAD>
<TITLE>Телефонный справочник </TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<TABLE BORDER=1 BorderCOLOR=”#006600” BGCOLOR="#FFFFCC">
<TR BGCOLOR=”#99CC33”>
<TD>№</TD>
<TD>Фамилия</TD>
<TD>Номер телефона</TD>
</TR>
<TR>
<TD BGCOLOR=”#FFFF99”>1</TD>
<TD>Фрося Бурлакова</TD>
<TD>8-952-987-13-20</TD>
</TR>
<TR>
<TD BGCOLOR=”#FFFF99”>2</TD>
<TD>Иван Петров</TD>
<TD>8-918-964-70-11</TD>
</TR>
<TR>
<TD BGCOLOR=”#FFFF99”>3</TD>
<TD>Афоня Ивлев</TD>
<TD>8-961-594-12-45</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>

В браузере вы увидите такую таблицу:

Как задать высоту таблицы (строки)

HTML дает возможность задать как высоту всей таблицы, так и отдельных строк.

Для задания высоты таблицы атрибут HEIGHT нужно указать в тэге TABLE, а чтобы изменить высоту отдельной строки – указать этот атрибут в тэге TR.

Для примера увеличим высоту первой строки

 <HTML>
<HEAD>
<TITLE>Телефонный справочник </TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<TABLE BORDER=1 BorderCOLOR=”#006600” BGCOLOR="#FFFFCC">
<TR BGCOLOR=”#99CC33”>
<TD>№</TD>
<TD>Фамилия</TD>
<TD>Номер телефона</TD>
</TR>
<TR>
<TD BGCOLOR=”#FFFF99”>1</TD>
<TD>Фрося Бурлакова</TD>
<TD>8-952-987-13-20</TD>
</TR>
<TR>
<TD BGCOLOR=”#FFFF99”>2</TD>
<TD>Иван Петров</TD>
<TD>8-918-964-70-11</TD>
</TR>
<TR>
<TD BGCOLOR=”#FFFF99”>3</TD>
<TD>Афоня Ивлев</TD>
<TD>8-961-594-12-45</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>

Результат

Как изменить ширину столбца

Теперь увеличим ширину первого столбца. Так как в HTML нет понятия столбец, то нам придется указать ширину первой ячейки верхней строки.

 <HTML>
<HEAD>
<TITLE>Телефонный справочник </TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<TABLE BORDER=1 BorderCOLOR=”#006600” BGCOLOR="#FFFFCC">
<TR BGCOLOR=”#99CC33”>
<TD>№</TD>
<TD>Фамилия</TD>
<TD>Номер телефона</TD>
</TR>
<TR>
<TD BGCOLOR=”#FFFF99”>1</TD>
<TD>Фрося Бурлакова</TD>
<TD>8-952-987-13-20</TD>
</TR>
<TR>
<TD BGCOLOR=”#FFFF99”>2</TD>
<TD>Иван Петров</TD>
<TD>8-918-964-70-11</TD>
</TR>
<TR>
<TD BGCOLOR=”#FFFF99”>3</TD>
<TD>Афоня Ивлев</TD>
<TD>8-961-594-12-45</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>

Результат

Выравнивание содержимого таблицы (по горизонтали и вертикали)

Выравнивать содержимое таблицы, строки или ячейки можно как по горизонтали (по верхнему краю, по середине, по нижнему краю), так и по вертикали (по левому краю, по средине, по правому краю).

И если с выравниванием по вертикали все понятно (у тэгов TABLE, TR и TD есть атрибут ALIGN). То как выровнять по горизонтали не совсем понятно.

Для выравнивания содержимого таблицы, строки или ячейки по горизонтали существует атрибут VALIGN. И этот атрибут имеет свои параметры TOP (выравнивание по верхнему краю), MIDDLE (по середине), BOTTOM (по нижнему краю).

Для нашей шапки установим выравнивание по центру, по середине.

 <TR ALIGN="CENTER" VALIGN=”MIDDLE”>

Также выровняем содержание ячеек с нумерацией и телефонами по центру.

 <HTML>
<HEAD>
<TITLE>Телефонный справочник </TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<TABLE BORDER=1 BorderCOLOR=”#006600” BGCOLOR="#FFFFCC">
<TR BGCOLOR=”#99CC33” VALIGN="MIDDLE" ALIGN="CENTER">
<TD>№</TD>
<TD>Фамилия</TD>
<TD>Номер телефона</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>1</TD>
<TD>Фрося Бурлакова</TD>
<TD ALIGN="CENTER">8-952-987-13-20</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>2</TD>
<TD>Иван Петров</TD>
<TD ALIGN="CENTER">8-918-964-70-11</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>3</TD>
<TD>Афоня Ивлев</TD>
<TD ALIGN="CENTER">8-961-594-12-45</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>

В браузере увидим:

__________________________________________

turbopro.ru

Html границы ячеек таблицы – Учебник CSS 3. Статья «Работа с таблицами в CSS»

Таблицы в CSS. Границы таблицы

Отображение границ ячеек

Расстояние между ячейками

Положение заголовка таблицы

Отображение пустых ячеек

Границы HTML таблиц без CSS

Границы HTML таблиц без CSS

Общая идея

seodon.ru | Учебник HTML — Границы, рамки и отступы HTML-таблиц

Отступление от темы или как убрать отступы по краям страницы

Границы таблицы html

Как обозначается граница таблицы!?

Как сделать одинарную границу у таблицы!?

Как сделать границу таблицы точками?

Сделать границу таблицы пунктирной линией.

Скрыть наружную границу таблицы html

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

Сетка таблицы | htmlbook.ru

Работа с HTML таблицами для новичков

Блок . Структура простейшей таблицы

Блок . Ячейки-заголовки

Блок . Атрибут cellspacing

Блок . Атрибут cellpadding

Блок . Обнуляем cellpadding и cellspacing

Блок . Добавляем ширину и высоту

Что вам делать дальше:

HTML. Таблицы

Как задать границу таблицы

Как изменить цвет границы

Как задать ширину таблицы

Как выровнять таблицу

Как закрасить таблицу

Как закрасить строку

Как закрасить ячейку

Как задать высоту таблицы (строки)

Как изменить ширину столбца

Выравнивание содержимого таблицы (по горизонтали и вертикали)

Добавить комментарий Отменить ответ

Рубрики

Рубрики