Сделать таблицу в html: Как сделать таблицу в HTML? Теги таблицы HTML и их атрибуты

СЛОЖНЫЕ ТАБЛИЦЫ HTML — Двадцать первый урок

Главная — Уроки — Уроки HTML

Таблица №1

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

1 ячейка	2 ячейка
3 ячейка, занимающая два столбца

Ну, верхний ряд ячеек нам ясен. Надеюсь, вы не забыли, что каждую строчку нужно начинать с тега <TR>, а заканчивать </TR>, а каждую ячейку помещать между тегами <TD> и </TD> соответственно. Пишем для них код:

1ячейка2ячейка

Рассмотрим теперь нижнюю строчку. Я вам подсказала, что она занимает столько же места, сколько и верхние две ячейки. Помните, когда мы изучали фреймы, там были атрибуты <rowspan> и <colspan>? Так вот радуйтесь, здесь те же самые наши знакомые!!! Если нам нужно объединить вертикальные столбцы, берем атрибут

colspan, а если нам нужно объединить в одной ячейке несколько рядов, то берем rowspan

Так что думаю, для нижней строчки, содержащей одну ячейкy, вам будет очень даже понятна следующая запись:

3 ячейка, занимающая два столбца

Думаю, у вас с этим не должно возникнуть трудностей. А весь код для выше приведенной таблицы будет такой (для наглядности я дала border=5:

1ячейка	2ячейка
3 ячейка, занимающая два столбца

 

---

Таблица №2

Теперь идем дальше. Создадим следующую таблицу:

1 ячейка, объединяющая 4 ячейки	2 ячейка
	3 ячейка	4 ячейка	5 ячейка

Тут вот что важно заметить: как правильно расставить теги TR: видите, слева только одно начало строки, а в конце получается конец аж четырех строчек!!! Вот это и запомните. Поэтому я сразу напишу вам полный код, а вы внимательно его изучите и поймите суть.

1 ячейка, объединяющая 4 ячейки	2 ячейка
	3 ячейка	4 ячейка	5 ячейка

 

Таблица №3

В следующей таблице мы объединим создадим такую ячейку, которая объеденить в себе и строчки и столбцы. Ведь может же быть такое? Да запросто! У меня, во всяком случае, это не заржавеет. Надеюсь, не заржавеет и у вас. Но, чтобы не запутаться с некоторыми навороченными таблицами, советую прежде их нарисовать, хотя бы на листочке бумаги. Я же не буду переводить бумагу, и нарисую свою таблицу в

Adobe Photoshop. Там же я нарисую все TR (см. рис. 95):

Рис. 95. Конечно не шедевр, но в работе поможет!

На этом рисунке я не указала теги TD, чтобы не загромождать рисунок, но вы уже кое в чем разбираетесь, поэтому и сами догадаетесь, что каждую ячеечку нужно обложить тегом TD

Обратите внимание, что десятая ячейка занимает столько места, сколько занимают четыре ячейки (1+5+6+7), то есть rowspan=4. Восьмая ячейка занимает место по ширине трех ячеек (2+3+4), а по высоте — двух ячеек (5+6), поэтому в теге TD у нее будет стоять colspan=3, а rowspan=2. Девятая же ячейка занимает по ширине столько же места, сколько и восьмая, то есть место трех ячеек (2+3+4), поэтому мы для нее запишем colspan=3.

Вот полный код этой таблицы:

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

И вот наша очень даже непростая таблица:

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

И не верьте никому, что составление таблиц — сложное, трудоемкое и муторное дело. Они просто двоечники, лодыри, тунеядцы и ничего делать не умеют! Не то что мы с вами!

Что ж, самое сложное, что есть в таблицах, я вам объяснила. Впереди — самое интересное! Но об этом вы узнаете на следующем уроке. А пока… грызите, грызите и грызите эти таблицы, пробуйте любые комбинации сами, это и на самом деле интересно. А я помчалась готовиться к следующему уроку. Постараюсь его сделать быстро-быстро… Так что даже с вами не прощаюсь, а просто говорю пока, братцы!

---

К списку всех уроков

(В. Ахметзянова, 2005 г)

Как в HTML сделать таблицу? Урок — 9 (для начинающих)

Если использовать HTML без CSS, то таблицы играют очень важную роль в создании невидимого каркаса для веб-страницы. А это поможет равномерно и красиво расположить текст, меню, картинки и т.д.
Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы:

Итак, как в HTML сделать простую таблицу?
Для постройки таблицы необходимо использовать три тега:

TABLE – этот тег нужен для открытия таблицы. Это, своего рода, контейнер, в котором содержатся другие элементы. Вот загнул так, что без пончика не разобраться. Ничего, разберетесь, когда увидите пример.
Закрывающий тег </table> обязателен.

Таблица состоит из ряда

ряд 1	ряд 1
ряд 2	ряд 2
ряд 3	ряд 3

и ячеек.

ячейка 1	ячейка 2
ячейка 1	ячейка 2
ячейка 1	ячейка 2

TR – создает новый ряд таблицы. Закрывающий тег </tr> обязателен.

TD – создает новую ячейку в ряду. Закрывающий тег </td> обязателен.

Давайте рассмотрим пример, чтобы лучше понять все выше сказанное:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд 1 ячейка1</td> <td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
<tr>
<td>ряд 3 ячейка 1</td> <td>ряд 3 ячейка 2</td>
</tr>
</table>
</body>
</html>

Вот результат:

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2
ряд 3 ячейка 1	ряд 3 ячейка 2

Давайте все объясню.
Перед каждым созданием новой таблицы открывается тег <table>.
Дальше, размещаем в середине контейнера <table> тег <tr>, что говорит о начале нового ряда.
В этом ряду вставляем две ячейки с содержанием при помощи тега
<td>ряд 1 ячейка1</td> <td>ряд1 ячейка2</td>
Закрываем ряд тегом </tr>.
Открываем другой ряд тегом <tr> и  вставляем в него снова две ячейки.
Закрываем ряд тегом </tr>.
Открываем третий ряд тегом <tr> и  вставляем в него снова две ячейки.
Закрываем ряд тегом

</tr>.
Закрываем таблицу тегом </table>.

Я думаю, разобрались? Если кто-то забыл, что такое атрибут border, который я использую вместе с тегом  <table>, напоминаю, что это толщина рамки. Если в border будет установлено значение «0», тогда границы таблицы будут невидимые.

Посмотрите парочку примеров созданных таблиц и можно идти дальше:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд 1 ячейка 1</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td>
</tr>
</table>
</body>
</html>

Результат:

ряд 1 ячейка 1

ряд 2 ячейка 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд 1 ячейка 1</td>
<td>ряд 1 ячейка 2</td>
<td>ряд 1 ячейка 3</td>
</tr>
</table>
</body>
</html>

Результат:

ряд 1 ячейка 1

ряд 1 ячейка 2

ряд 1 ячейка 3

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

Об этом я рассказываю в этой статье. Теперь, когда вы знаете основные нюансы об изображении в HTML, можно попробовать вставить картинку в таблицу. Это можно сделать следующим образом:

в строку между тегами <td> </td> вставить изображение.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд 1 ячейка 1</td>
<td>ряд 1 ячейка 2</td>
<td><img src="1.gif"></td>
</tr>
</table>
</body>
</html>

Результат:

ряд 1 ячейка 1

ряд 1 ячейка 2

А как объединить ячейки в таблице?

Чтобы объединить ячейки в таблице, вам нужно использовать такие атрибуты:
COLSPAN – определяет количество столбцов.
По умолчанию значение 1.
ROWSPAN – определяет количество рядов.
По умолчанию значение 1.

Для лучшего понимания посмотрите пример:
объединяем ячейки в верхнем ряду с помощью атрибута colspan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">ряд 1 ячейка 1+2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

ряд 1 ячейка 1+2
ряд 2 ячейка 1	ряд 2 ячейка 2

Теперь соединим ряды в ячейки с помощью атрибута rowspan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. 01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">Ячейка 1, ряд 1+2</td>
<td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

Ячейка 1, ряд 1+2	ряд1 ячейка2
	ряд 2 ячейка 2

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

Чтобы задать высоту и ширину таблицы, воспользуйтесь такими атрибутами:

WIDTH – ширина таблицы. Размер задается в пикселях или в процентах.
HEIGHT – высота таблицы. Размер задается в пикселях или в процентах.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. 01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

Выравнивание содержимого в таблице

Чтобы выровнять внутри таблицы содержимое (текст, картинки), можно воспользоваться такими атрибутами:

ALIGN – горизонтальное выравнивание содержимого в таблице.
К атрибуту ALIGN присваивается значения: left (по умолчанию), center, right.
left — прижать содержимое к левой части;
center – установить по центру;
right — прижать содержимое к правой части

VALIGN – вертикальное выравнивание содержимого в таблице.
К атрибуту VALIGN присваивается значения: top, bottom, middle.
top – прижать содержимое к верху;
bottom – прижать содержимое к низу;
middle – установить содержимое посередине

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1">
<tr>
<!-- ячейка по умолчанию-->
<td>ряд 1 ячейка1</td>
<!-- содержимое выравниваем горизонтально по правому краю, вертикально - прижимаем к низу -->
<td align="right" valign="bottom">ряд1 ячейка2</td>
</tr>
<tr>

<!-- содержимое выравниваем горизонтально по левому краю, вертикально - прижимаем к верху -->
<td align="left" valign="top">ряд 2 ячейка 1</td>
<!-- содержимое выравниваем горизонтально по центру, вертикально - прижимаем посредине -->
<td align="center" valign="middle">ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

Как сделать фон таблицы?

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

BGCOLOR –  цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
BACKGROUND –фон в таблице заполняется рисунком.

Внимание: если вы ходите задать фон цветом или фоновым рисунком всей таблице, атрибуты нужно установить в теге <table>. А если только к определенной ячейке, тогда в  тег <td>.

Для лучшего понимания посмотрите пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1" bgcolor="#FFF8D2">
<tr>
<td align="center">ряд 1 ячейка1</td>
<!-- содержимое выравниваем горизонтально по правому краю, вертикально - прижимаем к низу -->
<td align="center">ряд1 ячейка2</td>
</tr>

<tr>
<!-- рисунок как фон -->
<td align="center" background="fon. jpg">ряд 2 ячейка 1</td>
<!-- фон цветом -->
<td align="center" bgcolor="#33FF99">ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

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

И напоследок расскажу еще о двух полезных атрибутах.

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

CELLPADDING –расстояние между рамкой каждой ячейки html таблицы и содержимым в ней материалом.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1" cellpadding="15">
<tr>
<td>ряд 1 ячейка1</td>
<td>ряд1 ячейка2</td>
</tr>

<tr>
<td>ряд 2 ячейка 1</td>
<td>ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

CELLSPACING –расстояние между границами соседних ячеек.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Таблицы в HTML</title>
</head>
<body>
<table border="1" cellspacing="8">
<tr>
<td>ряд 1 ячейка1</td>
<td>ряд1 ячейка2</td>
</tr>

<tr>
<td>ряд 2 ячейка 1</td>
<td>ряд 2 ячейка 2</td>
</tr>
</table>
</body>
</html>

Результат:

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Фух, рассказал!
Надеюсь, с задачей я справился и доступно объяснил все, что я знал про html таблицы. А вам, рекомендую хорошо закрепить материал.
Попробуйте создать собственную таблицу, а лучше целый каркас для веб-страницы из таблицы html.
Всего вам хорошего!
Спасибо, что посетили мой блог BlogGood.ru

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

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

Метки: html, основы

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

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

Такого результата можно добиться, установив для свойства position значение «sticky» и указав 0 в качестве значения свойства top для элемента.

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

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

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

 

  <голова>
    
    <стиль>
      . tableFixHead {
        переполнение-у: авто; /* сделать таблицу прокручиваемой, если высота больше 200 пикселей */
        высота: 200 пикселей; /* задает начальную высоту таблицы 200 пикселей */
      }
      .tableFixHead thead th {
        положение: липкое; /* делаем заголовки таблицы липкими */
        верх: 0px; /* головка стола будет размещена сверху стола и прилипнет к нему */
      }
      стол {
        граница коллапса: коллапс; /* складываем границы таблицы друг к другу */
        ширина: 100%;
      }
      й,
      тд {
        отступ: 8px 16px;
        граница: 1px сплошная #ccc;
      }
      й {
        фон: #еее;
      }
    
  
  <тело>
    <дел>
      <таблица>
        
          
            Столбец 1
            Столбец 2
          
        
        
          
            1.1
            <тд>2.1
          
          
            1.2
            2. 2
          
          
            1.3
            2.3
          
          
            1.4
            2.4
          
          
            1,5
            2.5
          
          
            1.6
            2.5
          
          
            1.7
            2.5
          
          
            1.8
            2.5
          
        
      
    

 

  <голова>
    
    <стиль>
      .fixed_header {
        ширина: 400 пикселей;
        макет таблицы: фиксированный;
        граница коллапса: коллапс;
      }
      .fixed_header тело {
        дисплей: блок;
        ширина: 100%;
        переполнение: авто;
        высота: 100 пикселей;
      }
      .fixed_header thead tr {
        дисплей: блок;
      }
      .fixed_headerобъявление {
        фон: черный;
        цвет: #fff;
      }
      .fixed_header-й,
      .fixed_header тд {
        отступ: 5px;
        выравнивание текста: по левому краю;
        ширина: 200 пикселей;
      }
    
  
  <тело>
    <таблица>
      
        
          Столбец 1
          Столбец 2
          Столбец 3
          Столбец 4
          Столбец 5
        
      
      
        
          <тд>1
          <тд>2
          <тд>3
          <тд>4
          <тд>5
        
        
          <тд>6
          <тд>7
          8
          <тд>9
          <тд>10
        
        
          <тд>11
          12
          <тд>13
          14
          15
        
        
          16
          17
          18
          19
          20
        
        
          <тд>21
          22
          <тд>23
          <тд>24
          25
        
      
    
  
 

 .fixed_header тд {
  граница: 1px сплошная #797878;
} 

 IMPORTHTML(  URL  , запрос, индекс) 

  =ИМПОРТHTML("https://en.wikipedia.org/wiki/List_of_Netflix_original_films_(2012%E2%80%932019)","таблица",1)  

 =query(IMPORTHTML("https://en.wikipedia.org/wiki/List_of_Netflix_original_films","table",1)," Выберите Col1,Col2,Col3")