Как вставить две таблицы рядом html
Затем я поместил одну таблицу влево, а другую — вправо в пределах этого Div, что оставляет небольшое пространство между двумя таблицами. Таблицы будут естественно сворачиваться одна под другой, когда пространство будет уменьшаться (например, когда эта страница отображается на планшете или iPhone.
Такое расположение устраняет необходимость в наличии полей слева или справа от каждой таблицы для центрирования их на странице, а затем необходимости отбирать отступы для мобильных устройств в медиа запросах. Эта конструкция также исключает использование третьей таблицы для включения других, что также исключает необходимость использования встроенного элемента в двух таблицах, чтобы они лежали рядом друг с другом. Также см. Инструкции по настройке нескольких таблиц в HTML на одной странице.
HTML-код для гибкой настройки 2-таблицы
<div >
<table ><tr><td><img src=»http://zornet.ru/forum/http://zornet.ru/_fr/24/4743171.png» alt=»name»><br>Название</td><td style=»line-height:1.0; text-align:left;»>AMD объявила о новых поощрительных программах для геймеров, рассматривающих решение Ryzen или Radeon. Если вы находитесь на рынке. </td></tr></table>
<table ><tr><td><img src=»http://zornet.ru/forum/http://zornet.ru/_fr/24/5154088.png» alt=»name»><br>Название</td><td style=»line-height:1.0; text-align:left;»>В то время как растут страхи перед искусственным интеллектом и мощными технологиями, легко забыть, что социальная инженерия. </td></tr></table>
</div>
Код CSS для 2 горизонтальных таблиц
CSS
table.adapsuvnem<
border:3px solid #000;
width:17.500em;
/*280px */ margin:5px;
border-collapse: collapse;
float: left;
/*Задаем обтекание*/ >
table.adapsuvnem td<
font-size:100%;
padding: 5px;
text-align:center;
vertical-align:top;
>
@media only screen and (min-width : 768px) and (max-width : 959px) and (orientation:portrait)<
.adapsuvnem<
float:none;
width:100%;
display:block;
margin:0 auto;
>
>
CSS заметки для таблиц
Когда вы называете таблицу, вам нужно выбрать имя, которое описывает эту таблицу из всех других на вашем сайте. Удалены границы вокруг ячеек в каждой таблице, используя border: collapse. Исправлены em для ширины, поэтому таблицы будут сжиматься на небольших мобильных устройствах. Внутри каждой ячейки есть отступы в 5px. td: nth-child позволяет одной ячейке иметь жирный текст (под цветком), а не другую ячейку (текст), плюс вы можете указать разную ширину для каждой ячейки, если хотите.
CSS заметки для Div
Помечены элементы Div, которые, что используют как контейнеры, классом для «ящиков», но вы можете назвать его контейнерами или оболочками или как угодно. По умолчанию в качестве элементов Div будет использоваться вся ширина страницы или контейнера, для которых необходимо указать ширину.
Две таблицы HTML рядом, по центру страницы
У меня есть две таблицы на странице, которые я хочу отобразить рядом, а затем центрировать их на странице (на самом деле в другом div, но это самое простое, что я мог придумать):
Я понимаю, что это как-то связано с тем, что таблицы плавают, но я не понимаю, что мне не хватает. Есть много веб-страниц, которые описывают что-то вроде техники, которую я здесь показываю, но в любом случае она не работает; таблицы упорно цепляются за левое поле.
10 ответы
К сожалению, все эти решения полагаются на указание фиксированной ширины. Поскольку таблицы генерируются динамически (статистические результаты извлекаются из базы данных), ширина не может быть известна заранее.
Желаемого результата можно достичь, заключив две таблицы в другую:
и в результате получается пара таблиц с идеальным центрированием, которая плавно реагирует на произвольную ширину и (повторный) размер страницы (а атрибут таблицы align = «center» можно поднять во внешний div с автоматическими полями).
Я прихожу к выводу, что есть некоторые схемы, которые могут быть достигнуты только с помощью таблиц.
ответ дан 22 авг.
то, что я бы сделал, тогда dland — это использовать что-то вроде jQuery для определения ширины таблиц, а затем сложить две суммы вместе, чтобы определить ширину, необходимую для контейнера. — Тим Найт
Как вставить две таблицы рядом html
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;
>
>
Две таблицы в одну строку
Обсуждение темы Две таблицы в одну строку в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Как разместить две таблицы в одной строке . А то что не пробовал вторая таблица всегда получается под первой. Говорят надо одну общую .
| Страница 1 из 2 | 1 | 2 | > |
Как разместить две таблицы в одной строке .
А то что не пробовал вторая таблица всегда получается под первой.
Говорят надо одну общую таблицу для двух создать, а как именно .
Silent Rain добавил [date]1135722276[/date]:
Я впринципе для первой таблица назначил атриут align="left" (вторая таблица при этом послушно выровнялась в ряд к первой), но вторая слишком сильно липнет к первой (пространства практически не отсается). Как сделать между ними какой-нить зазор.
Может быть об этом идет речь?
| а зачем две таблицы делать в одной строке . это ж можно и одной таблицей сделать, просто ячейки правильно сгруппировать. |
Спасибо всем за решение предыдущего вопроса !
НОВАЯ ТРАБЛА ИСХОДЯЩЯЯ ИХ ПРЕДЫДУЩЕГО ВОПРОСА:
При создании двух или трех таблиц идущих в строку есть новая трабла. На разрешении 1024×768 все смотрится красиво, а вот на 1280×1024 или больших, остается много путого места справа. Как сделать чтобы на всех разрещениях все смотрелось как надо. Типа растягивалось.
m_Stasuk ну не хорошо же так с юзерками общаться, бери пример с Nielson (Злой модер). Человек хоть помогать взялся. А книга у меня есть, просто нету же там описания всех моих траблов, вот и на форумок понесло. А так сорри что вопросами гружу, хотя до недавнего времени я считал что форума для того и созданы что нашим пиплам помогать
Silent Rain добавил [date]1135890848[/date]:
Nielson — спасибо что помог, но вот сделал я общую таблице и указал ей атрибут width="100%" и нифига. Что делать.