Html таблица внутри таблицы: Таблица внутри таблицы в html

Содержание

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

Редко очень возникает потребность в создании таблицы, внутри которой находится ещё одна таблица.

Если вы хорошо знаете HTML, то у вас не возникнет проблемы, но всётаки давайте попробуем это сделать.

Для начала, давайте создадим простую таблицу 2х2:


<table border="1">
	<tr>
		<td>Ячейка 1.1</td>
		<td>Ячейка 1.2</td>
	</tr>
	<tr>
		<td>Ячейка 2.1</td>
		<td>Ячейка 2.2</td>
	</tr>
</table>

Получили простую таблицу:

Ячейка 1.1	Ячейка 1.2
Ячейка 2.1	Ячейка 2.2

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


<table border="1">
	<tr>
		<td>Ячейка 1.  1</td>
		<td>Ячейка 1.2</td>
	</tr>
	<tr>
		<td>
    		<table border="1">
            	<tr>
            		<td>Ячейка 2.1 - 1.1</td>
            		<td>Ячейка 2.1 - 1.2</td>
            	</tr>
            	<tr>
            		<td>Ячейка 2.1 - 2.1</td>
            		<td>Ячейка 2.1 - 2.2</td>
            	</tr>
            </table>
		</td>
		<td>Ячейка 2.2</td>
	</tr>
</table>

И мы получим следующие:

Ячейка 1.1

Ячейка 1.2

Ячейка 1.1	Ячейка 1.2
Ячейка 2.1	Ячейка 2.2

Ячейка 2.2

Вот так просто и создаётся таблица в таблице. Также попробуйте наш генератор html-таблиц.

Таблица

« Предыдущая статья

Закругление углов в css: border-radius

Следующая статья »

Красивая пагинация CSS на основе Bootstrap

Антиспам поле. Его необходимо скрыть через css

Ваше имя

Электронная почта

Ваше сообщение

Присылайте свои вопросы, предложения и пожелания на электронную почту. Будем рады сотрудничеству.

E-mail: [email protected]

Telegram: daruse93

Вы можете сказать спасибо автору сайта или перевести оплату.

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

Вложенные таблицы | htmlbook.ru

Объединение ячеек имеет некоторые недостатки, поэтому этот метод создания таблиц нельзя использовать повсеместно. Для примера рассмотрим пример 12.5, где задается высота ячейки с помощью атрибута height.

Пример 12.5. Явно заданная высота ячейки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Объединение ячеек</title>
 </head>
 <body>
  <table border="1" cellpadding="4" cellspacing="0">
   <tr>
    <td valign="top">Duis te feugifacilisi. Duis autem dolor in hendrerit 
         in vulputate velit esse molestie consequat.</td>
    <td rowspan="2" valign="top">Lorem ipsum dolor sit amet, consectetuer 
         adipiscing  elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
         dolore magna aliguam  erat volutpat.
  Ut wisis enim ad minim veniam, quis 
         nostrud exerci tution  ullamcorper suscipit lobortis nisl ut aliquip ex ea 
         commodo consequat. Duis te  feugifacilisi. Ut wisi enim ad minim veniam, quis 
         nostrud exerci taion  ullamcorper suscipit lobortis nisl ut aliquip ex 
         en commodo consequat.</td>
   </tr>
   <tr>
    <td>Lorem ipsum</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 12.7.

Рис. 12.7. Высота ячеек

Левая нижняя ячейка согласно коду HTML имеет высоту 40 пикселов, но поскольку высота содержимого правой колонки больше, чем содержимое левой колонки, то высота ячейки меняется. Получается, что атрибут height в данном случае игнорируется. Заметим, что данная особенность проявляется только в браузере Opera, но и другие браузеры могут отображать сложные таблицы с ошибками. Это часто выражается в тех таблицах, где явно устанавливается высота ячеек и их объединение по вертикали. Для упрощения верстки применяется прием с вложенными таблицами.

Суть идеи проста — в ячейку вкладывается еще одна таблица со своими параметрами. Поскольку эти таблицы в каком-то смысле независимы, то можно создавать довольно причудливые конструкции. Чтобы вложенная таблица занимала всю ширину ячейки, таблице надо задать ширину 100%.

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

Пример 12.6. Вложенные таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Вложенные таблицы</title>
 </head>
 <body>
  <table border="0" cellpadding="5" cellspacing="0">
   <tr>
    <td valign="top" bgcolor="#f0f0f0">
     <table cellpadding="2" cellspacing="1">
      <tr><td bgcolor="#ffffff">Lorem</td></tr>
      <tr><td bgcolor="#ffffff">Ipsum</td></tr>
      <tr><td bgcolor="#ffffff">Dolor</td></tr>
      <tr><td bgcolor="#ffffff">Sit</td></tr>
      <tr><td bgcolor="#ffffff">Amet</td></tr>
     </table>
    </td>
    <td valign="top" bgcolor="#ffffee">Lorem ipsum dolor sit amet, consectetuer 
         adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
         dolore magna aliguam erat volutpat.    Ut wisis enim ad minim veniam, quis 
         nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea 
         commodo consequat.</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 12.8.

Рис. 12.8. Вид вложенных таблиц

В данном макете с помощью таблицы создается две колонки, причем левая колонка имеет фиксированную ширину 150 пикселов. Чтобы создать подобие навигации, внутрь ячейки добавлена еще одна таблица с шириной 100%.

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

таблицы

Тег <table>

Как создать вложенную таблицу в html

Задавать вопрос

Спросил 2 года, 9 месяцев назад

Изменено 2 года, 9 месяцев назад

Просмотрено 12 тысяч раз

-2

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

Мне нужно создать HTML-таблицу с внутренней таблицей, как на приведенной ниже диаграмме:

[Пример] [1] Я запутался, должен ли я создать две отдельные таблицы для левой и правой стороны таблицы или объединить их вместе в одну таблицу

Я попробовал приведенный ниже пример, но он не генерируется в нужном мне формате, в основном, он не создает внутреннюю таблицу HTML:

<й> <й> <й> <й> <й> <й> <й> <й> <й> <й> <й>

html
html-таблица
datatable
вложенная таблица

Вы должны помнить, что таблицы будут пытаться уравнять свои ячейки, чтобы убедиться, что это полная и закрытая таблица. Таким образом, для перевода печатной таблицы в HTML требуется «объединение» ячеек с использованием свойств HTML colspan

и rowspan .
Трудно без проблем перевести такую таблицу печати в HTML. Таблица всегда будет адаптироваться к содержимому и экрану.

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

 <стиль>
   таблица, td {граница-коллапс: коллапс;}
   тд {граница: 1px сплошной черный; отступ: 5px; размер шрифта: 10px;}


<таблица>

<тд colspan="3" bgcolor="#8f9bff">ВАЖНЫЕ ПРИЗНАКИ <тд colspan="2"> <тд colspan="4"> <тд colspan="6" bgcolor="#8f9bff">УХОД ЗА КОЖЕЙ <тд colspan="4"> <тд> <тд colspan="4"> <тд colspan="6" bgcolor="#8f9bff">АКТИВНОСТЬ <тд colspan="4"> <тд> <тд> <тд colspan="7" bgcolor="#8f9bff">ВАННА <тд> <тд> <тд> <тд> <тд> <тд> <тд>

HTML-таблица tr внутри td

Вопрос задан 9 лет, 4 месяца назад

Изменено 1 год, 7 месяцев назад

Просмотрено 335 тысяч раз

127

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

Я пытаюсь создать таблицу в HTML. У меня есть следующий дизайн для создания. Я добавил

внутри

ЖИВЫЕ ПРИЗНАКИ ЧАСТОТА ПОЛНАЯ ПОДДЕРЖКА ПОМОГАТЬ ПОСМОТРЕТЬ ЧАСТОТА

Температура УХОД ЗА КОЖЕЙ

БП НАНЕСИТЕ ЛОСЬОН

Пульс АКТИВНОСТЬ

Дыхание

<тип ввода = "флажок" />

ПОЛНАЯ ПОДДЕРЖКА ПОМОГАТЬ ЗАБОТА О СЕБЕ ЧАСТОТА

ЧАСТОТА ПОЛНАЯ ПОДДЕРЖКА ПОМОЩЬ СМОТРИТЕ ВНИМАНИЕ ЧАСТОТА

Температура

БП Нанесите лосьон ❏ ❏ ❏

Пульс

Дыхание Амбу. .. Моб... ❏ ❏ ❏

ПОЛНАЯ ПОДДЕРЖКА ПОМОЩЬ СМОТРИТЕ ВНИМАНИЕ ЧАСТОТА Уокер Инвалидное кресло ❏ ❏ ❏

Трость

❏ Ванна ❏ Душ ❏ ❏ ❏ Стул Кровать ❏ ❏ ❏

Кровать ❏ Частично ❏ Завершить ❏ ❏ ❏ Черт. .. ...ммод ❏ ❏ ❏

Вспомогательное кресло-ванна ❏ ❏ ❏ Упражнение

но почему-то таблица не создана по проекту.

Кто-нибудь может предложить мне, как я могу добиться этого?

Я не могу создать Name1 | Разделы Цена1.

html
html-table

Вы должны добавить полную таблицу внутри td

<тд> <таблица> <тд> ...

Вы не можете поместить tr внутри td. Вы можете увидеть разрешенный контент из документации веб-документов MDN о td . Соответствующая информация находится в разделе разрешенного контента .

Еще один способ добиться этого — использовать colspan и rowspan . Проверьте эту скрипку.

HTML:

 <таблица>

<тд>цена3/тд>

И немного CSS:

 таблица {
    граница коллапса: коллапс
}
тд {
   граница: 1px сплошная #000000
}

Можно решить без вложенных таблиц.

 <граница таблицы="1">

Попробуйте этот код

Азбука	Азбука	Азбука		Азбука
Имя 1	Имя 2	Имя 3		Имя 4
ПУНКТ 1	ПУНКТ 2	имя1	цена1	ПУНКТ 4
		имя2	цена2
		имя3
Элемент 1	Элемент 1	Элемент 1		Элемент 1
		Имя1	Цена1
		Имя2	Цена2
		Имя3	Цена3
Элемент 2	Элемент 2	Элемент 2		Элемент 2

Полный пример:

Имя 1	Имя 2	Имя 3		Имя 4
ПУНКТ 1	ПУНКТ 2	имя	цена	ПУНКТ 4
		имя	цена
		имя	цена

<тд> <граница таблицы="1">

Поместите еще одну таблицу внутри элемента td, как показано ниже.

 <таблица>

... <тд> <таблица> ... ...

Просто добавьте новую таблицу в td , которую вы хотите. Пример: http://jsfiddle.net/AbE3Q/

 <граница таблицы="1">

<тд> <граница таблицы="1">

Вы можете проверить это, просто используя таблицу внутри таблицы, например

 

<голова>
  <стиль>
    стол,
    й,
    тд {
      граница: 1px сплошной черный;
      граница коллапса: коллапс;
    }
  

<тело>
  <таблица>

<тд> <таблица> <тд>С <тд>Д <тд>Р

 <граница таблицы = "1px;">

<тд> <граница таблицы = "1px;">

 <таблица>

<тд> <таблица> <тд> .

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт

Азбука	Азбука	Азбука	Азбука
Азбука	Азбука	Азбука	Азбука
Элемент 1	Элемент 1
Имя 1	Цена 1
Имя 2	Цена 2
Имя 3	Цена 3
Элемент 1
Элемент 2	Элемент 2	Элемент 2	Элемент 2
Элемент 3	Элемент 3	Элемент 3	Элемент 3
Азбука	Азбука
имя1	цена1
Азбука
Азбука	Азбука	Азбука	Азбука
Элемент 1	Элемент 2
qweqwewe	qweqwewe
qweqwewe	qweqwewe
qweqwewe	qweqwewe
Элемент 3
Элемент 1	Элемент 1
имя1	цена1
имя2	цена2
имя3	цена3
элемент1
А	Б
Э	Ф	Г	Н
Э	Т	Т
Продукт	количество	Цена	Всего
Элемент-1	Элемент-1
Имя1	Цена1
Имя2	Цена2
Имя3	Цена3
Имя4	Цена4
Элемент-1
Элемент-2	Элемент-2	Элемент-2	Элемент-2
Элемент-3	Элемент-3	Элемент-3	Элемент-3