Создание таблиц в html. все о html таблицах

Содержание:

More Examples
Цвет фона и текста
Пример создания таблицы
Общие моменты использования
HTML Теги
Table Elements
Создание таблицы в HTML
- Атрибуты тега TABLE
- Атрибуты тега TD или TH — ячейки
Tables Backgrounds
- Example
Простые таблицы
Alternating Background Color
Выравнивание содержимого таблицы (по горизонтали и вертикали)
Задание размера
Содержимое ячеек
Как сделать таблицу
CSS для таблиц
Nested Tables
- Example
HTML Учебник

More Examples

How to add collapsed borders to a table (with CSS):

<html><head><style>table, th, td { border: 1px solid
black; border-collapse: collapse;}</style></head><body><table> <tr>
<th>Month</th>    <th>Savings</th> </tr>
<tr>    <td>January</td>
<td>$100</td> </tr> <tr>
<td>February</td>    <td>$80</td> </tr>
</table></body></html>

How to right-align a table (with CSS):

<table style=»float:right»> <tr>
<th>Month</th>    <th>Savings</th> </tr>
<tr>    <td>January</td>
<td>$100</td> </tr> <tr>
<td>February</td>    <td>$80</td> </tr>
</table>

How to center-align a table (with CSS):

<html><head><style>table, th, td { border: 1px solid
black;}table.center { margin-left: auto;
margin-right: auto;}</style></head><body><table
class=»center»> <tr>
<th>Month</th>    <th>Savings</th> </tr>
<tr>    <td>January</td>
<td>$100</td> </tr> <tr>
<td>February</td>    <td>$80</td> </tr>
</table>

How to add background-color to a table (with CSS):

<table style=»background-color:#00FF00″> <tr>
<th>Month</th>    <th>Savings</th> </tr>
<tr>    <td>January</td>
<td>$100</td> </tr> <tr>
<td>February</td>    <td>$80</td> </tr>
</table>

How to add padding to a table (with CSS):

<html><head><style>table, th, td { border: 1px solid
black;}th, td { padding: 10px;}</style></head><body><table> <tr>
<th>Month</th>    <th>Savings</th> </tr>
<tr>    <td>January</td>
<td>$100</td> </tr> <tr>
<td>February</td>    <td>$80</td> </tr>
</table></body></html>

How to set table width (with CSS):

<table style=»width:400px»> <tr>
<th>Month</th>    <th>Savings</th> </tr>
<tr>    <td>January</td>
<td>$100</td> </tr> <tr>
<td>February</td>    <td>$80</td> </tr>
</table>

How to create table headers:

How to create a table with a caption:

<table>
<caption>Monthly savings</caption> <tr>
<th>Month</th>    <th>Savings</th> </tr>
<tr>    <td>January</td>
<td>$100</td> </tr> <tr>
<td>February</td>    <td>$80</td> </tr>
</table>

Цвет фона и текста

Html tables

Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам <table>, <td> и <tr> можно применить следующие параметры:

background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;
bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.

Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег <font>.

Например:

<table border="1" bgcolor="green">
<tr height="40" bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Отступы таблицы в HTML

В HTML отступы в таблице задаются с помощью тега <table>:

cellspacing — расстояние между границами соседних ячеек;
cellpading — расстояние между содержимым и границей ячейки.

Например:

<table border="1" bgcolor="green" cellspacing="20" cellpadding="20">
<tr height="40" bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td>
 background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Визуальное отображение данного кода в браузере таково:

Выравнивание таблицы в HTML

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

Параметр align может иметь следующие значения:

left — выравнивание по левой границе;
right — выравнивание по правой границе;
center — выравнивание по центру.

Параметр valign может иметь такие значения:

bottom — выравнивание по нижней границе;
top — выравнивание по верхней границы;
middle — выравнивание посередине.

Пример:

<table border= "1">
 <td width="300" height="200">Текст 1</td>
   <td width="300" height="200" align="right" valign="top">Текст 2</td>
</table>

Как сделать таблицу по центру в HTML? С помощью упомянутого значения center.

Например:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
  <tr>
    <td align="center">
      <table cellpadding="60" cellspacing="4" border="1">
        <tr>
          <td>
            Текст таблицы
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Вставка изображения в HTML таблицу

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

Например:

<table border= "1">
<tr align="left"> 
   <td><img src="http://amadeya.users.photofile.ru/photo/amadeya/1288508/xlarge/42642197.jpg"></td> 
   <td> Содержимое 2 ячейки </td> </tr>
<tr align="right"> 
   <td> Содержимое 3 ячейки </td>
    <td> Содержимое 4 ячейки </td> </tr>
</table>

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

width — ширина;
height — высота;
alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
title — подпись к картинке;
align — горизонтальное выравнивание;
valign — вертикальное выравнивание.

Кроме того, облачив изображение в специальный тег <a href=»страница, на которую ведёт ссылка»><img src=»имя файла.jpg»></a>, его можно использовать в качестве ссылки.

Объединение ячеек в HTML таблице

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

Объединение столбцов одной строчки выглядит так:

<table border="1">
<tr>
   <td colspan="3">Текст 2</td>
</tr>
<tr>
   <td>Текст 2</td>
   <td>Текст 3</td>
   <td>Текст 4</td>
</tr>
</table>

У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:

<table border="1">
<tr>
   <td rowspan="3">Текст 1</td>
   <td>Текст 2</td>
</tr>
<tr>
   <td>Текст 3</td>
</tr>
<tr>
   <td>Текст 4</td>
</tr>
</table>

Пример создания таблицы

How to set background color in html?

Создайте документ формата HTML и скопируйте в него следующий код:

<!DOCTYPE html>
<html>
   <head>
	<title>Пример таблицы</title>
   </head>
   <body>
	<table border="1">
	 <caption>Инструменты создания сайтов</caption>
	 <tr>
	  <th>Назначение</th><th colspan="2">Инструмент</th>
	 </tr>
	 <tr>
	  <td>Разметка</td><td>HTML</td><td>XHTML</td>
	 </tr>
	 <tr>
	  <td>Оформление</td><td colspan="2">CSS</td>
	 </tr>
	 <tr>
	  <td>Разработка</td><td>PHP</td><td>Python</td>
	 </tr>
	</table>
   </body>
</html>

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

Разберём, какие строчки кода за что отвечают.

<table border=»1″> — открыли таблицу, задав ей толщину рамок.
<caption> Инструменты создания сайтов </caption> — озаглавили её.
<tr> — открыли строку.
<th>Назначение</th> — создали ячейку с оформлением заголовка.
<th colspan=»2″>Инструмент</th> — создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
</tr> — закрыли строку. Аналогично создали остальные строки.
<tr> <td>Разметка</td><td>HTML</td><td>XHTML</td> </tr> — добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
</table> — закрыли таблицу.

Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке

Общие моменты использования

Лучшие бесплатные онлайн-инструменты table generator для создания таблиц для любых целей

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

Мне этот подход не нравится. По моему мнению, разработчик должен контроллировать процесс сортировки, фильтрации. Это требует дополнительного кода.

Вместо такого «черного ящика», который потом сложно кастомизировать:

разработчик должен будет писать:

Разработчик должен сам прописывать шаги: вычислить описание колонок, отфильтровать, отсортировать.

Все функции/конструкторы будут импортироваться из моей таблицы.

В качестве данных будет использоваться массив объектов:

Мне понравился подход создания описания колонок в jsx в качестве элементов.

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

В функции мы создаем описание колонок.

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

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

Параметр , определяет какой ключ из объекта использовать для получения значения.

Ширина тоже обязательный параметр, может задаватся как числом или как массивом ключей от которых зависит ширина.

В примере верхняя строка в таблице зависит от ширины двух колонок .

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

HTML Теги

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><menu><menuitem><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Table Elements

Here’s a list of the table elements available in HTML5.

Represents the table.

Represents a table row within a table.

Represents a cell (or table data) within the table.

Represents a table header cell.

Represents a block of rows that consist of a body of data for its parent table.

Represents the block of rows that consist of the column labels (headers) for its parent table.

Represents the block of rows that consist of the column summaries (footers) for the parent table.

Represents the title of its parent table.

Represents a group of one or more columns in its parent table.

Used for specifying column properties for each column within a colgroup.

Создание таблицы в HTML

Рассмотрим теги для создания таблицы:

<table>
	<tr>
		<td> содержание <td>
	<tr>
<table>

Результат:
Добавим границу для таблицы — атрибут :

<table border="1">
	<tr>
		<td> содержание <td>
	<tr>
<table>

Результат:

Создания таблицы начинается с тега (от англ. «таблица»). Тег служит для создания строки. В строке располагаются ячейки — тег . Завершается таблица закрывающим тегом

Или пример таблицы посложнее:

Атрибуты тега TABLE

	— таблица влево; – табл. по центру; — табл. вправо.

	ширина
	цвета рамки
	ширина грани рамки
	внутреннее расстояние до рамки

	(фон таблицы)

Важно: Для ячеек-заголовка таблицы используется тег вместо. Браузер размещает содержимое таких ячеек по центру и делает шрифт полужирным

Атрибуты тега TD или TH — ячейки

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

Важно:

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

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

Пример: Создать «каркас» таблицы со всеми тегами группировки

Выполнение:

<table  border="1">
<caption>таблица<caption>
<thead>
	<tr>
	<th>Заголовок 1<th><th>3аголовок 2<th>
	<tr>
<thead>
<tbody>
	<tr>
	<td>содержимое<td><td>содержимое<td>
	<tr>
<tbody>
<tfoot>
...
<tfoot>
<table>

Лабораторная работа №1: Создайте таблицу по образцу. У таблицы должен быть заголовок и области для группировки (thead — 1-я строка таблицы, tbody — 2-я и 3-я строки таблицы, tfoot — 4-я строка таблицы).

Таблица с областями группировки
Столбец 1	Столбец 2	Столбец 3	Столбец 4
Строка4 Ячейка1	Строка4 Ячейка2	Строка4 Ячейка3	Строка4 Ячейка4
Строка2 Ячейка1	Строка2 Ячейка2	Строка2 Ячейка3	Строка2 Ячейка4
Строка3 Ячейка1	Строка3 Ячейка2	Строка3 Ячейка3	Строка3 Ячейка4

Tables Backgrounds

You can set table background using one of the following two ways −

bgcolor attribute − You can set background color for whole table or just for one cell.
background attribute − You can set background image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" bgcolor = "yellow">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

This will produce the following result −

Here is an example of using background attribute. Here we will use an image available in /images directory.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" background = "/images/test.png">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

This will produce the following result. Here background image did not apply to table’s header.

Простые таблицы

Таблица типа «объекты — свойства» (ОС)

Таблица типа «объекты — свойства» — это таблица, содержащая информацию о свойствах отдельных объектов, принадлежащих одному классу.

Общий вид таблиц типа ОС:

Количество строк в таблице зависит от количества имеющихся объектов, а количество столбцов — от количества рассматриваемых свойств.

Пример 1

Таблица 2.2

Города Золотого кольца России

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

В таблице представлены объекты «Владимир», «Кострома», «Переславль-Залесский» и «Гусь-Хрустальный», принадлежащие классу «город». Для каждого объекта приведены значения свойств «год основания», «основатель» и «достопримечательность», выраженные числами и словами.

В маленьких таблицах (из 3-4 строк) объекты можно перечислять в произвольном порядке. Если объектов в таблице много, то располагать их надо в некотором осмысленном порядке, согласно некоторому правилу. Например, в таблице 2.2 города могут быть перечислены в алфавитном порядке, по возрастанию или убыванию годов их основания.

Если в таблице типа ОС свойств больше, чем объектов, то ее можно «повернуть набок» — строки превратить в графы, а графы — в строки.

Например:

Таблица 2.3

Города Золотого кольца России

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

Таблица типа «объекты-объекты-один» (ООО)

Таблица типа «объекты-объекты-один» — это таблица, содержащая информацию о некотором одном свойстве пар объектов, чаще всего принадлежащих разным классам.

Общий вид таблиц типа ООО:

В этой таблице головка (верхний заголовок) имеет сложную (двухъярусную) структуру.

Пример 2

Таблица 2.4

Таблица типа ООО может быть «повернута на бок строки превращены в графы, а графы — в строки.

Например:

Таблица 2.5

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

Пример 3

В таблице «Расстояния между городами» представлены расстояния между парами объектов, принадлежащих одному классу «город», поэтому объекты этого класса занесены и в головку, и в боковик таблицы. В результате головка таблицы «теряет» один уровень, и сама таблица выглядит проще. Эта таблица также относится к типу ООО.

Таблица 2.6

Подобные таблицы есть в атласах автомобильных дорог. Правда, там они оформляются так:

Таблица 2.7

Пример 4

Таблица 2.8

По этой таблице можно получить представление о том, чем увлекаются ученики 7 класса, какие кружки и секции они посещают. Если ученик увлекается танцами, спортом или компьютерной графикой (посещает соответствующий кружок или секцию), то в нужную ячейку ставится 1, а если нет — 0.

Ячейки этой таблицы содержат числа, но только 0 и 1. Такие таблицы называют двоичными таблицами.

Важная особенность этой таблицы состоит в том, что в ней фиксируются не количественные (сколько?), а качественные свойства (наличие/отсутствие связи между объектами).

Коротко о главном

Таблица типа «объекты-свойства» — это таблица, содержащая информацию о свойствах отдельных объектов, принадлежащих одному классу.

Alternating Background Color

Background color can be added to HTML elements using the CSS property.

You can apply a background color to the whole table, or just parts of it, like say, the table cells, or certain rows, etc.

Now let’s use a little CSS trick to apply alternating colors to the rows of our table. So, the first row will be color A, the second will be color B, the third will be color A, the fourth will be color B, and so on.

To do this, use the CSS pseudo-class selector along with the and value to determine the background color of odd and even rows.

table.alt tr:nth-child(even) {
background-color: #eee;
}
table.alt tr:nth-child(odd) {
background-color: #fff;
}

Note that in this example, I also create a class called and apply it to the table, then use that class as part of my selector in the style sheet. So if there’s more than one table in the document, only tables with that class will have these styles applied to them.

Here’s what the document looks like with these styles.

<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
}
table.alt tr:nth-child(even) {
background-color: #eee;
}
table.alt tr:nth-child(odd) {
background-color: #fff;
}
</style>
</head>
<body>
<table class=»alt»>
<tr>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
</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” width="400" BGCOLOR="#FFFFCC">
<TR BGCOLOR=”#99CC33” HEIGHT="50" VALIGN="MIDDLE" ALIGN="CENTER">
<TD WIDTH="50">№</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>

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

Задание размера

Рассмотренный выше пример выдал таблицу небольшого размера, неудобную для зрительного восприятия. Подогнать размеры таблицы под необходимые параметры можно при помощи двух атрибутов:

width — задает ширину.
height — задает высоту.

Значениями этих атрибутов могут быть пиксели или проценты. Некоторые браузеры неверно работают с процентами в отношении атрибута height. Поэтому следует тестировать свой код в нескольких самых распространенных:

IE.
Mozilla Firefox.
Opera.
Konqueror.
Safari.

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

Используя атрибуты width и height, зададим размеры: ширина таблицы HTML — 300, а высота 200 пикселей:

В результате браузер выдаст таблицу с нужными нам размерами:

Содержимое ячеек

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

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

Особо нужно оговорить заполнение ячеек цветом: поскольку они пустые, не содержат никаких данных, нужно прописать пустой пробел: <td bgcolor=»код цвета»> </td>. При этом ширина ячейки может не соответствовать требуемой. А почти всегда так и происходит. В этом случае к этому тегу <td> применяется атрибут width с необходимым значением: <td bgcolor=»код цвета» width=»нужное значение»> </td>.

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

Как сделать таблицу

Способ 1: вставка

Сначала необходимо поставить мигающий курсор (мигающую палочку) в нужное место. Для его смещения вниз нажмите кнопку Enter на клавиатуре. А чтобы поднять мигающий курсор выше — Backspace.

Или можно просто щелкнуть в нужном месте два раза левой кнопкой мыши.

В программе Word 2007-2021 для создания таблицы нажмите на надпись «Вставка» в левом верхнем углу программы. Появятся новые пункты редактирования, среди которых будет «Таблица».

Кликнув по ней, откроется список, в котором Ворд предложит несколько вариантов добавления. Нажмите на пункт «Вставить» в нижнем меню.

Откроется небольшое окошко. В верхней части напечатайте необходимое количество столбцов и строк

Также обратите внимание на нижнюю часть окошка. Точка должна стоять на пункте «Постоянная», и в соседнем белом поле должно быть указано значение «Авто»

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

После нажатия на ОК таблица с указанным количеством столбцов и строк вставится в документ (на страницу).

Способ 2: быстрое создание

Быстрое добавление ничем не отличается от обычного. Но этот способ ограничен в возможностях: максимальное количество строк — 8, а столбцов — 10.

Переходим во вкладку «Вставка» в верхнем меню программы.

Нажимаем на надпись «Таблица» и добавляем нужное количество столбцов и строк через верхнюю часть окошка.

Принцип работы прост — Вы проводите курсором (стрелкой) по квадратикам, а программа Word формирует объект исходя из выбранного количества строк и столбцов.

Способ 3: рисование

Этот способ хорош в том случае, если нужно составить сложную таблицу. Например, такую:

Переходим во вкладку «Вставка».

Нажимаем на кнопку «Таблица» и выбираем «Нарисовать».

Курсор (стрелка мышки) примет вид небольшого карандаша. Вот им мы и будем рисовать.

Для начала сделаем основу. Для этого наведите курсор (в нашем случае — карандаш) в нужное место на странице. Затем нажмите левую кнопку мышки и, не отпуская ее, «рисуйте» прямоугольник подходящего размера.

Отпустите кнопку мышки — основа добавится.

Теперь осталось нарисовать детали — строки и столбцы. Это как раз тот редкий случай, когда объяснить данный процесс на словах крайне трудно. Принцип следующий: нажимаем левую кнопку мышки внутри прямоугольника и протягиваем линию. Программа в этом поможет — линия «дорисуется» самостоятельно. Главное, показать Ворду направление.

Если Вы вдруг что-то сделаете неправильно, всегда можно вернуться на шаг или несколько шагов назад. Для этого нажмите на значок «Отменить» вверху программы.

Когда всё будет готово, нажмите два раза левой кнопкой мышки по пустому месту. Курсор снова станет палочкой, а не карандашом.

Способ 4: шаблоны

В программе Word есть готовые шаблоны — заготовки, которые можно добавить на страницу и отредактировать. Поменять цифры и значения, вставить или удалить строки и столбцы.

Делаются они так же, как и обычные — через вкладку «Вставка». Наводим курсор на пункт «Экспресс-таблицы» и выбираем подходящий шаблон.

Способ 5: Excel

Если в ячейки нужно не только ввести значения, но еще и «посчитать» (сложить, умножить, вычислить процент и т.д), то следует вставить лист Excel.

Для этого опять же перейти в закладку «Вставка», нажать на надпись «Таблица». Из списка выбрать пункт «Excel».

CSS для таблиц

Чтобы оформить таблицу, необходимо задать для тега <table>, как минимум, свойство border:

Table CSS

table { border: 2px solid #124480; }

1	table{border2pxsolid#124480; }

Вид рамки вы можете выбрать по собственному усмотрению, равно как и ее цвет.

Для тегов <td>, как правило, нужно задавать внутренние отступы и рамки:

td,
th { border: 1px solid #185eb2;
padding: 10px; }

1
2
3

td,

th{border1pxsolid#185eb2;

padding10px;}

Да, и если у вас есть теги <th>, про них тоже не стоит забывать.

Что получилось:
В примере видно, что между всеми ячейками и границами таблицы и ячейками есть пустое пространство. Раньше оно определялось атрибутом для тега <table>. Но сейчас он считается устаревшим и заменяется css-свойством border-spacing:

Свойство border-spacing

table {
border: 2px solid #124480;
border-spacing: 10px;
}

1
2
3
4

table{

border2pxsolid#124480;

border-spacing10px;

}

Прямо скажем, используют его нечасто, т.к. вид таблицы с border-spacing: 10px будет таким:

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

Свойство border-collapse

table {
border: 2px solid #124480;
border-collapse: collapse;
}

1
2
3
4

table{

border2pxsolid#124480;

border-collapsecollapse;

}

Если хочется получить таблицу с разделителями между строк, стоит задать такое правило:

Разделители для строк

tr { border: 1px solid #3f7ec9; }

1	tr{border1pxsolid#3f7ec9; }

Если необходимо «раскрасить» строки через одну, необходимо использовать следующие селекторы и свойства:

/* Для четных строк */
tr:nth-child(even){ background-color: #cde; }
/* Для нечетных строк */
tr:nth-child(odd){ background-color: #d3f5f4; }

1
2
3
4

/* Для четных строк */

trnth-child(even){background-color#cde; }

/* Для нечетных строк */

trnth-child(odd){background-color#d3f5f4; }

В последнем примере, чтобы расположить 2 таблицы рядом, для тега было использовано свойство:

table { display: inline-table }

1	table{displayinline-table}

В этом случае таблицы ведут себя аналогично элементам с .

Естественно, вы можете вместо использовать свойство :

tr:nth-child(even) {
background-image: url(img/diagonal-noise.png);
}
tr:nth-child(odd) {
background-image: url(img/tetr.gif);
}

1
2
3
4
5
6

trnth-child(even){

background-imageurl(imgdiagonal-noise.png);

}

trnth-child(odd){

background-imageurl(imgtetr.gif);

}

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

table {
border: 2px solid #124480;
border-collapse: collapse;
<strong>width: 500px;</strong>
}
td:first-child{
text-align: right;
}
td:last-child{
width: 30%;
text-align: right;
}
td:last-child:after{
content: ‘ грн.’;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

table{

border2pxsolid#124480;

border-collapsecollapse;

<strong>width500px;<strong>

}

tdfirst-child{

text-alignright;

}

tdlast-child{

width30%;

text-alignright;

}

tdlast-childafter{

content’ грн.’;

}

Так, с помощью правил выше мы задали width для , а также выравнивание текста по правому краю для первой и последней колонки. А с помощью псевдоэлемента для последней колонки добавили еще единицу для цены — ‘грн’. В результате получилась такая таблица:

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

Nested Tables

You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag <td>.

Example

Following is the example of using another table and other tags inside a table cell.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         
         <tr>
            <td>
               <table border = "1" width = "100%">
                  <tr>
                     <th>Name</th>
                     <th>Salary</th>
                  </tr>
                  <tr>
                     <td>Ramesh Raman</td>
                     <td>5000</td>
                  </tr>
                  <tr>
                     <td>Shabbir Hussein</td>
                     <td>7000</td>
                  </tr>
               </table>
            </td>
         </tr>
         
      </table>
   </body>
	
</html>

This will produce the following result −

Previous Page
Print Page

HTML Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML Цвет
Цвет
RGB
HEX
HSL

HTML с CSSHTML Ссылки
Ссылки
Ссылки цветные
Ссылки закладки

HTML Изображение
Изображение
Изображение карта
Изображение фон
Элемент картинки

HTML ТаблицыHTML Списки
Списки
Неупорядоченный список
Упорядоченный список
Другие списки

HTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML с JavaScriptHTML Путь к файлуHTML Мета тегиHTML Методы версткиHTML Адаптивный дизайнHTML Компьютерный кодHTML5 СемантикаHTML5 СинтаксисHTML СущностьHTML СимволыHTML ЭмодзиHTML КодировкаHTML URL КодировкаHTML в XHTML