Как вставить две таблицы рядом html

Как вставить две таблицы рядом html

Имею две таблички:

1	2
3

5	6
7

Есть ли возможность расположить вторую справа от первой,
а не под первой?

Re: Как расположить рядом две таблицы

От:	ZORK	www.zorkaltsev.com
Дата:	15.05.03 10:54
Оценка:

Здравствуйте, avpavlov, Вы писали:

Сделать таблицу, в которую положить эти две:

 
 
 
 "2">
1
2
 
3
 
 
 
 "2">
5
6
 
7
 
 
 
 

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

От:	Flamer	http://users.livejournal.com/_flamer_/
Дата:	15.05.03 10:54
Оценка:

Здравствуйте, avpavlov, Вы писали:

[]

A>Есть ли возможность расположить вторую справа от первой,
A>а не под первой?

Есть. Для этого нужно три таблицы (как вариант):

 
 
 
 
ТАБЛИЦА СЛЕВА
 
 
 
 
ТАБЛИЦА СПРАВА
 
 
 
 

Re: Как расположить рядом две таблицы

От:	TATAPuH
Дата:	15.05.03 11:04
Оценка:

Здравствуйте, avpavlov, Вы писали:

например так (засунуть две таблички в нутри другой)

 
 
 
1
2
 
3
 
 
 
 
5
6
 
7
 
 

или можешь извратиться так

  
1
2
 
3
 
 
5
6
 
7
 
 

Re: Как расположить рядом две таблицы

От:	avpavlov
Дата:	15.05.03 11:13
Оценка:

Не совсем точно задачу обрисовал.

Рисую с помощью таблиц doc-flow:

. +----------+. +----------+ . | |. | | . Action1 | |. Action2 | | ------------>| State1 |------------>| State2 | . User1 | |. User2 | | . Date1 | |. Date2 | | . +----------+. +----------+ .. невидимые линии -- видимые линии Action+User+State - итерация

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

Сейчас для избежания скроллинга дроблю в ручную про 3 итерации в таблицу,
потом следующие три оформляю в таблицу и т.д.
(не оформляю по 3 итерации в строку одной большой таблицы, чтобы ячейки по вертикали
не выравнивались друг под друга, тексты State, Action и User могут сильно отличаться
по размеру)

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

Предложенные способы вставки таблиц в охватывающую таблицу тут не помогут,
но всё равно спасибо

Re[2]: Как расположить рядом две таблицы

От:	avpavlov
Дата:	15.05.03 11:16
Оценка:

TAT>или можешь извратиться так
TAT>

TAT> TAT>  TAT> TAT>
1
2
3
 TAT>  TAT> TAT>
5
6
7
 TAT> TAT>

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

Re[2]: Как расположить рядом две таблицы

От:	Воронков Василий
Дата:	15.05.03 11:25
Оценка:

Здравствуйте, avpavlov, Вы писали:

 
 
1
 
2
 
 
1
 
2
 
 
 
 
3
 
4
 
 
3
 
4
 
 

Re[3]: Как расположить рядом две таблицы

От:	avpavlov
Дата:	15.05.03 11:29
Оценка:

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

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

Re: Как расположить рядом две таблицы

От:	uzzy
Дата:	15.05.03 12:04
Оценка:	10 (2)

Здравствуйте, avpavlov, Вы писали:

A>Имею две таблички:

A>

A>

A>

1	2
3

A>

A>

A>

5	6
7

A>Есть ли возможность расположить вторую справа от первой,
A>а не под первой?

   table.t1  
1
2
 
3
 
 
5
6
 
7
 
  

Как вставить две таблицы рядом html

• 
• 
• 

Затем я поместил одну таблицу влево, а другую — вправо в пределах этого Div, что оставляет небольшое пространство между двумя таблицами. Таблицы будут естественно сворачиваться одна под другой, когда пространство будет уменьшаться (например, когда эта страница отображается на планшете или iPhone.

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

HTML-код для гибкой настройки 2-таблицы

Название

AMD объявила о новых поощрительных программах для геймеров, рассматривающих решение Ryzen или Radeon. Если вы находитесь на рынке.

Название

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

Код CSS для 2 горизонтальных таблиц
CSS

table.adapsuvnem<
border:3px solid #000;
width:17.500em;
/*280px */ margin:5px;
border-collapse: collapse;
float: left;
/*Задаем обтекание*/ >

table.adapsuvnem tdfont-size:100%;
padding: 5px;
text-align:center;
vertical-align:top;
>

@media only screen and (min-width : 768px) and (max-width : 959px) and (orientation:portrait).adapsuvnemfloat:none;
width:100%;
display:block;
margin:0 auto;
>
>

CSS заметки для таблиц

Когда вы называете таблицу, вам нужно выбрать имя, которое описывает эту таблицу из всех других на вашем сайте. Удалены границы вокруг ячеек в каждой таблице, используя border: collapse. Исправлены em для ширины, поэтому таблицы будут сжиматься на небольших мобильных устройствах. Внутри каждой ячейки есть отступы в 5px. td: nth-child позволяет одной ячейке иметь жирный текст (под цветком), а не другую ячейку (текст), плюс вы можете указать разную ширину для каждой ячейки, если хотите.

CSS заметки для Div

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

Хитрости табличного дизайна. Расположение 2 таблиц с данными в одной строке

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

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

Наиболее удачным способом разметки дизайна страницы в языке html является таблица. Помимо своей основной функции таблица позволяет очень удачно служить «каркасом» дизайна сайта.

В нашем «случае», мы будем использовать таблицу для создания колонок с текстом.

Расположение двух таблиц в одной строке

Вот, примерно, какой html-код вы должны были получить:

В каждой ячейке (между тегами

) нашей таблицы создаем ещё одну таблицу, но c шириной рамки, равной 1 пиксель, и с одним столбцом.
Посмотрите, какая таблица должна получиться у вас:

Вот, что получилось у меня:

Атрибут «cellspace» в основной таблице равен 2.

Привожу весь html-код, разработанный нами в данный момент:

Видите, ничего сложного. А главное — код читается во всех браузерах.

Колонки с текстом

На основе этого мы можем с Вами создать колонки с текстом.

Вот, что в результате должно у вас получиться:

Довольно привлекательно, не правда ли?

Успехов в веб-дизайне!

Спасибо!

Автор статьи: Демьянчук Виталий.

Как поставить 2 таблицы рядом в HTML??

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

Дополнен 14 лет назад

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

Голосование за лучший ответ

сделай выравнивание.

Похожие вопросы

Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.