html — Как расположить некоторые элементы td один под другим в одной строке?
Вопрос задан
Изменён 12 месяцев назад
Просмотрен 549 раз
Есть таблица с некоторыми строками:
<table>
<tbody>
<tr>
<td>Element1</td>
<td>Element2</td>
<td>Element3</td>
<td>Element4</td>
</tr>
</tbody>
</table>Сейчас выглядит как обычная строка, где каждый элемент идет в ряд один за другим. Мне нужно чтобы элементы Element1 и Element2 были расположены один под другим, а элементы Element3 и Element4 были расположены в ряд как обычно. Вот таким образом:
Element1
Element3 Element4
Element2
Буду рад любым советам.
- html
- css
- css3
- html5
<table>
<tbody>
<tr>
<td>Element1</td>
</tr>
<tr>
<td>Element3</td>
<td>Element4</td>
</tr>
<tr>
<td>Element2</td>
</tr>
</tbody>
</table>И никаких лишних элементов. При желании можете перенести стили в отдельный блок или файл.
Используя только один tr:
tr {
display: grid;
}
td:not(:first-child, :last-child) {
margin-left: 50%;
grid-area: 2 !important;
}
td:first-child {
grid-area: 1;
}
td:last-child {
grid-area: 3;
}<table>
<tbody>
<tr>
<td>Element1</td>
<td>Element2</td>
<td>Element3</td>
<td>Element4</td>
</tr>
</tbody>
</table> Референсы::not:first-child:last-child
<tr>
<td>Element1</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Element3</td>
<td>Element4</td>
</tr>
<tr>
<td>Element2</td>
<td></td>
<td></td>
</tr>
4
Совет первый: избавиться от табличной верстки в принципе.
Если не имеете возможности, то:
Совет второй: волшебное свойство display, примененное к таблице и ее элементам, превратит их c точки зрения подхода к верстке в
Если все же таблицы вам нужны обязательно, то достаточно вспомнить атрибуты ячеек, придуманные в самой первой версии таблиц именно для такого случая (бордер у таблицы добавил для наглядности):
<table border="1">
<tbody>
<tr>
<td>Element1</td>
<td rowspan="2">Element3</td>
<td rowspan="2">Element4</td>
</tr>
<tr>
<td>Element2</td>
</tr>
</tbody>
</table>
7
Вторую и терью клетку объединить с помощью rowspan=»2″ Тоесть El3 Сделает row двойного размера.
<tr>
<td>Element1</td>
<td rowspan="2">Element3</td>
<td rowspan="2">Element4</td>
</tr>
<tr>
<td>Element2</td>
</tr>
Зарегистрируйтесь или войдите
Регистрация через Google Регистрация через Facebook Регистрация через почтуОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.
В чём разница между HTML-тегами и ?
0 ∞Много лет назад тег td использовался для вёрстки сайтов, что не является его прямым назначением. А с ростом популярности CSS идея «таблицы — это плохо» укоренилась в мозгах многих разработчиков. Но это совсем не так — таблицы плохи только тогда, когда их используют не по назначению. То есть не для отображения табличных данных: электронных таблиц, календарей, и т.д. Если вам необходимо вставить на страницу подобные данные, не стоит сомневаться — смело используйте HTML-таблицы.
Те, кто начал заниматься веб-разработкой уже после того, как табличная вёрстка впала «в немилость», могут не знать всех элементов, используемых в HTML-таблицах. Один из распространённых вопросов от них звучит так: «В чём разница между табличными тегами <th> и <td>?».
- Что такое тег <TD>?
- Что такое тег <TH>?
- Когда стоит использовать <TH>, а не <TD>?
HTML тег td расшифровывается как table data («табличные данные»). Он создаёт ячейки в определённом ряду таблицы. Именно в этот тег необходимо вставлять текст и изображения.
Тег <th> расшифровывается как table header («заголовок таблицы»). Он во многом похож на <td>. Он принимает такой же тип содержимого (хотя изображение в <th> лучше не вставлять), но обозначает одну ячейку как заглавную.
Большинство браузеров отображают текст в такой ячейке жирным шрифтом и выравнивают его по центру. Конечно, для оформления заголовков таблицы и содержимого ячеек можно и нужно использовать CSS.
Тэг <th> (а не теги tr и td) используется для установки содержимого ячейки заголовком определённой колонки или ряда.
Заголовки таблицы обычно расположены по верхнему или левому краю таблицы — в верхнем ряду как заголовки колонки или в первой колонке слева как заголовки ряда.
Ячейки-заголовки показывают, что за содержимое расположено в таблице рядом или под ними, облегчая восприятие таблицы.
Не используйте <th> для оформления ячеек. Поскольку браузеры обычно меняют внешний вид ячеек-заголовков, некоторые веб-дизайнеры пользуются этой особенностью для выделения и центровки шрифта. Так не следует делать сразу по нескольким причинам:
- Нельзя полагаться на то, что все браузеры будут отображать ваш контент одинаково. Будущая версия браузера может поменять цвет, используемый по умолчанию или вообще перестать выделять содержимое тега <th>. Поэтому никогда не стоит полагаться на встроенные стили браузеров и использовать данный HTML-элемент;
- Это семантически неправильно. Некоторые пользовательские агенты могут читать голосом содержимое таблиц и добавлять «заголовок таблицы: ваш текст» при встрече с ячейкой <th>. Кроме этого некоторые веб-приложения могут размещать заголовки по верхней кромке страницы. Это станет проблемой, если ячейка не является заголовком, а используется исключительно для оформления.
Использование неподходящих тегов может ограничить доступность вашего контента для многих пользователей. Особенно для тех, кто использует различные вспомогательные устройства.
Для оформления ячеек следует применять CSS. Разделение стиля (CSS) и структуры (HTML тег td) — общепринятый метод веб-дизайна уже много лет. Повторим ещё раз: используйте <th> потому, что содержимое ячейки — заголовок, а не потому, что вам нравится, как это по умолчанию отображает ваш браузер.
КГКонстантин Гиновскийавтор
Пожалуйста, опубликуйте свои отзывы по текущей теме материала. За комментарии, дизлайки, отклики, подписки, лайки низкий вам поклон!
Таблица как организация в html без , , , и т. д.? — HTML и CSS — Форумы SitePoint
Привет, ребята,
Я занимался редизайном веб-сайта для профессора и на странице биографии их старого веб-сайта, скриншот здесь.
Но лично я считаю, что использование таблиц для раскладки или вообще уже действительно устарело. Я знаю, что то, что я сказал выше, может быть спорным, но я был бы искренне признателен, если бы кто-нибудь помог мне, если это возможно, написать html и, если необходимо, оформить его так, чтобы я мог организовать эти данные, как если бы они были в таблице, без использования HTML-теги таблицы.
Я весь день пытался использовать теги div и другие стили, но никак не могу их получить.
Вот html приведенной выше таблицы биографии на старом сайте. Кстати, он содержит огромное количество встроенных стилей, которые использовал предыдущий веб-дизайнер/кодировщик. Извиняюсь, лол.
<таблица ячейкипаддинг="5">
<тело>
Профессиональный опыт:
Технический
Персонал
Белл
Телефонные лаборатории - Мюррей Хилл
<тд>1968–70
Ассистент
Профессор
Мичиган
Государственный университет
1970–76
Посещение
Ассоциированный
Профессор
Институт
физики - Бхубанешвар, Индия
Июнь - сентябрь 1976 г.
Партнер
Профессор
Мичиган
Государственный университет
<тд>1977–81
Профессор
Мичиган
Государственный университет
1982 – настоящее время
Посещение
Профессор
Индийский
Институт науки - Бангалор, Индия
Сент. - декабрь 1979 г.
Посещение
Профессор
Тата
Институт фундаментальных исследований - Индия
Ян. - 19 марта80
Посещение
Профессор
Университет
Антверпена - Бельгия
Март – июнь 1980 г.
Посещение
Ученый
Институт Макса Планка
für
Festkörperforschung, Stüttgart
Лето 1980
Посещение
Ученый
Аргонн
Национальная лаборатория
Лето 1981
Посещение
Профессор
Джавархарлал
Университет Неру - Дели, Индия
Технологический институт - Мадрас
Ян. - апрель 1996 г.
- апрель 1996 г.Заранее спасибо. Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы, комментарии или сомнения,
С наилучшими пожеланиями,
Команда 1504. 2
Лично я рассматриваю использование таблиц для раскладки или вообще уже реально устарело.
Слушай внимательно: ты только что опустошил ванну, но слышишь, как ребенок плачет в сливном отверстии? Ты и его выбросил!
Таблицы по-прежнему необходимы в HTML. Просто их следует использовать только для табличных данных, что у вас здесь и есть. Так что это подходящее время, чтобы использовать стол. Было бы неплохо использовать несколько
команда1504 3
ральф_м:Слушай внимательно: ты только что опустошил ванну, но слышишь, как ребенок плачет в сливном отверстии? Ты и его выбросил!
Вот почему так тихо!!! Думал, что наконец-то обрел покой, лол
Так что это объясняет, почему я не мог придумать другого или хотя бы правильного способа сделать это в HTML.
Тогда я, вероятно, собираюсь просто почистить код таблицы, но
у вас или у кого-нибудь есть идеи, как создать что-то подобное.
Потому что я и близко не подходил без странных стилей.
ральфм 4
Первое, что я бы порекомендовал, это удалить все встроенные стили и другие атрибуты и т. д. и построить базовую таблицу. Тогда посмотрите на его стиль.
Вот удобный справочник, который показывает, для чего предназначены различные части таблицы:
ТАБЛИЦА — Таблица
team1504 5
кк. Большое спасибо за помощь, Ральф!
команда1504 6
Я видел одно место, где помогло использование
и университет, где он защитил докторскую диссертацию.Я попытался выделить их жирным шрифтом. Но то, что
Год, когда он получил степень магистра, и университет, в котором он ее получил, имеют правильный интервал.
Но год, когда он получил докторскую степень, и университет, в котором он ее получил, не совпадают.
Вот фото того, что у меня есть. По сути, я просто стремлюсь выровнять столбцы по вертикали.
Кроме того, вот код, который у меня есть до сих пор:
<таблица>
<тело>
Справочная информация:
Место рождения:
Индия, гражданин США
Дата рождения:
24, 19 сентября45
Образование:
М. С.
1963
<й>
[B]Университет Алхабада, Индия (золотой медалист университета)[/B]
<й>
Доктор философии
<тд>1968
[B]Калифорнийский университет, Риверсайд[/B]
С.ральфм 7
Возможно, в этой таблице они не требуются, хотя, возможно, стоит иметь заголовок вверху каждого столбца, указывающий назначение столбца, например
Роль
Вы также можете использовать
Заголовок строки
, хотя здесь это не нужно.
фелгалл 8
Также, если у вас есть строка заголовка, она должна быть в thead, а не в tbody.
Клетус Спаклер 9
Я не думаю, что вам следует помещать весь ваш контент в таблицу, только те части, которые являются табличными данными. AFAIC, части образования и профессионального опыта были бы хороши в (двух разных) таблицах. Остальное не место в таблице.
система 10
ральф_м:Слушай внимательно: ты только что опустошил ванну, но слышишь, как ребенок плачет в сливном отверстии? Ты и его выбросил!
Скажите это разработчикам vBulletin 4, ПОЖАЛУЙСТА.
Вопрос ОП заключается в том, что я называю результирующей риторикой «против столовой мафии», которая была настолько безудержной пять или шесть лет назад, и ВСЕ ЕЩЕ витает там без уважительной причины.
Если каждая строка представляет собой связанные данные, и все столбцы содержат данные одного типа… и у вас есть заголовки для ваших столбцов — это табличные данные… Все таблицы причин СУЩЕСТВУЮТ.
Однако ваш код устарел — даже код вашего второго поста устарел. Видите ли, у нас есть другие теги, называемые TH и CAPTION. Вы должны действительно посмотреть на них.
Кроме того, поскольку у вас на самом деле нет THEAD, нет причин указывать TBODY… и, конечно, весь этот встроенный стиль — просто катастрофа.
| Технический персонал | Bell Telephone Laboratories — Murray Hill | 1968 — 70 | ||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Ассистент профессора | Университет штата Мичиган | 1970 — 76 | ||||||||||||||||||||||||||||||||
| , содержащих содержимое заголовка, а теги | содержат обычные ячейки данных таблицы.СинтаксисТег | |||||||||||||||||||||||||||||||||
д, и т.д, и т.д...
В 99% случаев люди используют полноразмерный colspan и strong внутри таблицы, они делают все это неправильно. TH говорит, о чем идет речь (вы можете добавить SCOPE), класс существует только для того, чтобы иметь возможность отличить два TD друг от друга в устаревших браузерах, которые не знают родственных селекторов, first-child или nth-child. ..
Хотя глядя на то, к чему вы стремитесь, особенно на тот самый последний пост, где количество TD/TH, кажется, варьируется от строки к строке... Я начинаю думать, что это не табличные данные, поскольку нет отношений в терминах. столбцов сохраняется.
этот последний пост, в частности, является полной тарабарщиной - вам нужно иметь ОДИНАКОВОЕ количество столбцов внутри КАЖДОГО TR - и, как указано, TH используется ВМЕСТО TD, а не внутри или вокруг. 
е. он окружен парой открывающих и закрывающих теговТег
| : Вывод [ИЗОБРАЖЕНИЕ 1: ДОБАВИТЬ ЛОГОТИП ТЕМЫ SCALER] [ИЗОБРАЖЕНИЕ 1 ЗАВЕРШЕНИЕ]АтрибутыАтрибуты в HTML добавляются в теги для предоставления дополнительной информации о рассматриваемом элементе. Тег | |||||||||||||||||||||||||||||||||
| Атрибут | Синтаксис | Описание |
|---|---|---|
| align | ||
Помогает выровнять содержимое строки по содержимому в строке таблицы. | ||
| bgcolor | ||
| Помогает установить цвет фона для строки. | ||
| id | ||
| Устанавливает уникальный идентификатор для строки. | ||
| стиль | ||
| Используется для стилизации строки с помощью встроенного стиля. | ||
| tabindex | ||
| Используется для упорядочения строк в случае вкладок. | ||
| title | ||
| Устанавливает заголовок для строки и полезен в случае всплывающих подсказок. | ||
| valign | ||
| Используется для вертикального выравнивания содержимого строки. |
- Атрибуты событий HTML позволяет событиям инициировать действия браузера, такие как запуск JavaScript, когда пользователь щелкает элемент. В таблице ниже приведены некоторые из наиболее часто используемых атрибутов событий с тегом
в HTML: Атрибут Описание onclick Выполняется по нажатию кнопки мыши. onmousedown Выполняется при удерживании мыши. Как использовать тег
в HTML? Строка в таблице определяется с помощью тега
в HTML. Обычная табличная структура содержит один или несколько элементов тега или . Это можно лучше понять, используя следующий пример: Примеры
Давайте рассмотрим несколько примеров, чтобы глубже понять различные сценарии использования тега
в HTML. Базовая структура тега
в HTML с некоторыми атрибутами Чтобы начать работу с атрибутом
, рассмотрим пример простой таблицы, содержащей строку заголовка, 3 обычных строки и 3 столбца. Мы пока не будем стилизовать ее, чтобы сохранить простоту этой таблицы и понять, как выглядит таблица без стилей. В приведенной ниже таблице содержатся данные о клиентах, включая идентификатор, имя и телефон. , используются для отделения элемента заголовка от элемента тела. Они называются группами содержимого таблицы и используются для простоты понимания и удобочитаемости кода.Вывод
Объединение строк и столбцов
Предположим, я, как владелец магазина, хочу добавить еще один способ связи с покупателем.
Итак, я планирую добавить еще один столбец под названием электронная почта. Я также надеюсь, что смогу добавить номер телефона и адрес электронной почты под заголовком «Контакт». Как мне это сделать? Вот тут-то и пригодится охват.Захват — это использование одной или нескольких ячеек в строке или столбце для размещения определенного элемента. Разделение может быть двух типов: охват строк и охват столбцов. При объединении строк указанная строка является разнесенной или распределенной по нескольким строкам. Точно так же при распределении столбцов указанный столбец охватывает или распределяется по нескольким столбцам. Чтобы лучше понять это, давайте реализуем решение упомянутой выше проблемы.
Вывод
Явное указание групп содержимого таблицы
Такие теги, как и
Код ниже показывает, как это можно реализовать:Вывод
Как мы видели выше, в выводе есть n изменений. Отличие только в читабельности кода.
Основные стили тега
< tr > в HTMLТеперь мы увидим, как строки таблицы могут быть оформлены с помощью CSS (каскадных таблиц стилей). Любой стиль, примененный к элементам
, будет применен ко всей строке, если он не переопределен стилем ячейки. Чтобы стилизовать строку в HTML с помощью базовых стилей, мы рассмотрим использование границы (которая используется для установки границы для заданных элементов), шрифта (для изменения стиля и размера шрифта), цвета фона (для изменения фон выделенных элементов) и отступы (для установки длины пространства между концом границы строки и содержимым внутри нее).
В приведенном ниже примере мы будем применять стили CSS непосредственно к элементам, не создавая для этой цели никаких идентификаторов или классов.
При добавлении вышеуказанного стиля в CSS мы получаем следующую таблицу:
Вывод
Расширенный стиль тега
< tr > в HTMLКроме того, можно использовать некоторые дополнительные свойства стиля.
Для этого мы можем использовать селектор nth-of-type в CSS. Это применяет изменения к каждой n-й строке типа, указанного в параметрах.В приведенном ниже примере вы можете увидеть, как стилизовать таблицы с чередованием строк и столбцов с разными цветами, изменив код CSS:
Применив приведенный выше CSS к нашему HTML-коду, мы получим следующее.
Вывод
Как выровнять содержимое внутри тега
< tr > в HTML?Содержимое строки в HTML можно выровнять с помощью свойства text-align. Теперь давайте попробуем реализовать те же стили, которые мы использовали в CSS, используя встроенные стили, то есть вместо отдельного скрипта CSS мы добавим стили CSS в теги HTML, используя атрибут стиля.
Вывод
Как добавить фоновый цвет к строке таблицы в HTML?
Чтобы добавить цвет фона в строку таблицы, мы используем свойство background-color. Это значение может быть выражено в цветах, шестнадцатеричном коде, значениях RGB или в любом другом приемлемом формате.
Вывод
Как вертикально выровнять содержимое внутри тега
< tr > в HTML?Чтобы выровнять содержимое по вертикали, т. е. содержимое по вертикали (представление столбца), внутри тега
в HTML, мы используем свойство vertical-align. Свойство вертикального выравнивания может содержать такие значения, как верх и низ. Вывод
Поддержка тега
в HTML Тег
в HTML поддерживается в следующих браузерах: - Chrome
- Край
- Firefox
- Internet Explorer
- Опера
- Сафари
- Веб-просмотр Android
- Хром Android
- Firefox для Android
- Опера Android
- Сафари на iOS
- Самсунг Интернет
Заключение
- Тег
в HTML используется для определения строк в таблицах. - Тег
в HTML содержит другие теги, в том числе , который используется для хранения ячеек данных, и , который используется для хранения ячеек заголовков. - Тег
Итак, я планирую добавить еще один столбец под названием электронная почта. Я также надеюсь, что смогу добавить номер телефона и адрес электронной почты под заголовком «Контакт». Как мне это сделать? Вот тут-то и пригодится охват.
Код ниже показывает, как это можно реализовать:
Для этого мы можем использовать селектор nth-of-type в CSS. Это применяет изменения к каждой n-й строке типа, указанного в параметрах.
