Перейти к содержимому

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

  • автор:

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

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

1 2
3

5 6
7

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

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

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

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

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

 
"2">
12
3
"2">
56
7

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

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

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

[]

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

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

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

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

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

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

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

 
12
3
56
7

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

  
12
3
56
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>
12
3
TAT> TAT> TAT>
56
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  
12
3
56
7

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

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

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

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

name
Название
AMD объявила о новых поощрительных программах для геймеров, рассматривающих решение Ryzen или Radeon. Если вы находитесь на рынке.
name
Название
В то время как растут страхи перед искусственным интеллектом и мощными технологиями, легко забыть, что социальная инженерия.

Код 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 таблицы рядом?

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

Ссылка на комментарий
Поделиться на других сайтах

Больше способов поделиться.

2 ответа на этот вопрос

  • Сортировать по голосам
  • Сортировать по дате

Рекомендованные сообщения

Присоединяйтесь к обсуждению

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

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

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

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

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

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

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

a
a
a
a
a
a

a
a
a
a
a
a
a

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

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

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

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

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