Как убрать внешние границы таблицы html

Как убрать границу между ячейками таблицы html?

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

Отслеживать
задан 30 июл 2022 в 3:42
1 1 1 бронзовый знак

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

30 июл 2022 в 4:54

В макете сайта есть таблица (изображение таблицы: wampi.ru/image/RrKzPDO ) и там с виду одна колонка справа в tbody, но информация разделена на две ячейки. Может это как-нибудь по другому можно сделать?

30 июл 2022 в 5:23

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Манипулировать отступами между отдельным ячейками в таблице нельзя, можно пойти другим путем и использовать дополнительные элементы с position:absolute в td для создания border и эффекта отступа.

table < border: 3px solid #009dff; text-align: center; width: 100%; table-layout: fixed; border-spacing: 0; padding: 2px; font-family: arial; >thead < background-color: #f4af16; color: white; >thead tr:first-of-type td < border-bottom: 1px solid white; >thead tr:last-of-type td < border-bottom: 2px solid white; >tbody tr < position: relative; >tbody .border < position: absolute; border: 1px solid black; left: 0px; top: 2px; right: 0px; bottom: 2px; display: block; >td

   Количество в коробке  
 Штук  Килограм  
 
   12000  18,48  
  12000  18,48  
  12000  18,48  
  12000  18,48

Количество в коробке
12000	18,48
12000	18,48
12000	18,48
12000	18,48

Сетка таблицы

Для создания таблицы показанной на рис. 1 потребуется всего ничего: установить стилевое свойство border для каждой ячейки и воспользоваться свойством border-collapse .

Рис. 1. Вид таблицы с сеткой

При добавлении свойства border к селектору TD или TH между ячейками возникают двойные линии, которые образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло, для селектора TABLE указывается свойство border-collapse со значением collapse , как показано в примере 1.

Пример 1. Создание сетки

    Таблица       2004 2005 2006  
 Рубины 43 51 79  
 Изумруды 28 34 48  
 Сапфиры 29 57 36

	2004	2005	2006
Рубины	43	51	79
Изумруды	28	34	48
Сапфиры	29	57	36

В данном примере также устанавливается цвет фона для ячеек заголовка (тег ) через свойство background .

Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии внутри нее (рис. 2).

Рис. 2. Сетка внутри таблицы

При этом удобнее всего будет не убрать рамку, а спрятать ее, задав ей цвет, совпадающий с цветом фона веб-страницы. Так, в примере 2 фон страницы задан белым и такого же цвета используется граница, которая добавляется к селектору TABLE .

Пример 2. Таблица без внешней рамки

    Таблица       2004 2005 2006  
 Рубины 43 51 79  
 Изумруды 28 34 48  
 Сапфиры 29 57 36

	2004	2005	2006
Рубины	43	51	79
Изумруды	28	34	48
Сапфиры	29	57	36

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

как убрать границы в html таблице

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

Лучший ответ

в теге Table ставишь border=»0″
затем в тегагх ячеек таблици прописываешь стиль.
например: style =»border-left:1px solid #000000;»

border-left — граница слева
border-right — справа
border-top — сверху
border-bootom — снизу

1px — толщена линии
solid — сплошная линия
#000000 — 16-ричный код цвета в формате RGB (#ff0000 — красный)

Остальные ответы

По моему (table border=»0″). В круглых скобках пишется специально, чтобы текст отобразился (т. е. Вы смогли его увидеть) , а не обработался в браузере.

Стилизация таблиц

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

Необходимые знания:	Базовый HTML (Введение в HTML), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (Введение в CSS).
Цель:	Научиться эффективно стилизовать HTML таблицы.

Типичная HTML таблица

Давайте начнём с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идёт о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:

table> caption> A summary of the UK's most famous punk bands caption> thead> tr> th scope="col">Bandth> th scope="col">Year formedth> th scope="col">No. of Albumsth> th scope="col">Most famous songth> tr> thead> tbody> tr> th scope="row">Buzzcocksth> td>1976td> td>9td> td>Ever fallen in love (with someone you shouldn't've)td> tr> tr> th scope="row">The Clashth> td>1976td> td>6td> td>London Callingtd> tr> . some rows removed for brevity tr> th scope="row">The Stranglersth> td>1974td> td>17td> td>No More Heroestd> tr> tbody> tfoot> tr> th scope="row" colspan="2">Total albumsth> td colspan="2">77td> tr> tfoot> table>

Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как scope (en-US) , , (en-US), (en-US) и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь punk-bands-unstyled.html):

Это выглядит достаточно грубо, трудно читаемо и скучно. Нам нужно использовать немного CSS чтобы все исправить.

Активное обучение: Стилизация таблицы

В этой части обучения мы будем работать над тем чтобы стилизовать наш пример таблицы.

В начале необходимо сделать копию sample markup, загрузить оба изображения (noise и leopardskin), и вставить эти файлы в отдельную папку на вашем компьютере.
Следующее, это создать новый файл style.css и сохранить его в той же папке вместе с другими файлами.
Подключить CSS в HTML для этого разместить следующую строку в HTML внутри :

link href="style.css" rel="stylesheet" type="text/css" />

Отступы и разметка

Первое что нам нужно это разобраться с отступами/разметкой, так как по умолчанию стилизация таблцы выглядит неразборчиво! Сделаем это, добавив CSS в ваш style.css файл:

/* Отступы */ table  table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; > thead th:nth-child(1)  width: 30%; > thead th:nth-child(2)  width: 20%; > thead th:nth-child(3)  width: 15%; > thead th:nth-child(4)  width: 35%; > th, td  padding: 20px; >

Наиболее важные части следующие:

Свойство table-layout (en-US) со значением fixed как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда table-layout: fixed , размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора thead th:nth-child(n) ( :nth-child ) («Выберите n-ый дочерний элемент (en-US) в последовательности, внутри элемента (en-US)«) и задать им заданную в процентах ширину. Ширина колонки соответствует ширине её заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье Fixed Table Layouts. Мы также использовали width 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется ещё некоторая работа для правильного отображения на экранах небольших размеров).
Свойство border-collapse (en-US) со значением collapse это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить border-collapse: collapse; рамки схлопываются в одну и так выглядит намного лучше:
Мы установили border вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.
Мы установили padding на элементах (en-US) и — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.

На этом этапе наша таблица выглядит уже гораздо лучше:

Немного простой типографики

Теперь мы ещё кое-что изменим.

Во-первых, мы пойдём и найдём на Google Fonts шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный элемент и изменить объявление font-family на выбранный вами Google Fonts шрифт.

link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet" type="text/css" />

Затем добавьте следующий CSS в ваш style.css файл, ниже предыдущего кода:

/* Типографика */ html  font-family: "helvetica neue", helvetica, arial, sans-serif; > thead th, tfoot th  font-family: "Rock Salt", cursive; > th  letter-spacing: 2px; > td  letter-spacing: 1px; > tbody td  text-align: center; > tfoot th  text-align: right; >

Здесь нет ничего специально для таблиц, мы просто настраиваем стилизацию шрифтов, чтобы упростить чтение:

Мы установили доступный глобально шрифт sans-serif; это вполне стандартный стилистический выбор. Мы установили выбранный нами шрифт для заголовков внутри элементов (en-US) и , который подходит нам по тематике панков.
Мы добавили немного letter-spacing в заголовках и ячейках которым необходимо добавить читаемости. Опять же это основной стилистический приём.
Мы выравниваем по центру текст ячейках внутри (en-US) чтобы они совпадали с заголовками. По умолчанию у ячеек свойство text-align имеет значение left , а заголовки значение center , но обычно выглядит лучше если они выравниваются в одном стиле. По умолчанию, чтобы внешний вид заголовков отличался у них задан жирный шрифт.
Мы выровняли заголовок справа внутри так чтобы он визуально ассоциировался с соответствующими ему данными.

В результате таблица выглядит немного аккуратнее:

Графика и цвета

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

Начнём с добавления в конец файла style.css следующего CSS:

/* Графика и цвета */ thead, tfoot  background: url(leopardskin.jpg); color: white; text-shadow: 1px 1px 1px black; > thead th, tfoot th, tfoot td  background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%)); border: 3px solid purple; >

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

Мы добавили background-image в (en-US), и изменили color (en-US) для всего текста внутри header и footer на белый (и ещё text-shadow ) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.

Полосатая зебра

Мы хотели бы посвятить целый раздел, чтобы показать вам как реализовать полосы зебры — чередующиеся цветные строки которые упрощают чтение разных строк в вашей таблице. Добавим следующий CSS в ваш style.css файл:

/* Полосатая зебра */ tbody tr:nth-child(odd)  background-color: #ff33cc; > tbody tr:nth-child(even)  background-color: #e495e4; > tbody tr  background-image: url(noise.png); > table  background-color: #ff33cc; >

Ранее вы видели как :nth-child селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула 2n-1 выберет все нечётные дочерние элементы (1, 3, 5 и т.д.), а формула 2n выберет все чётные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова odd и even , которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем чётным и нечётным строкам разные (яркие) цвета.
Ещё мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный .png с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.
И наконец мы установили для таблицы сплошной цвет фона, который обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор :nth-child .

Этот взрыв цвета выглядит следующим образом:

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

Стилизация заголовка

Последнее что мы сделаем с нашей таблицей это стилизация заголовка. Для этого добавим следующие строки в наш файл style.css :

/* Заголовок */ caption  font-family: "Rock Salt", cursive; padding: 20px; font-style: italic; caption-side: bottom; color: #666; text-align: right; letter-spacing: 1px; >

Здесь нет ничего особенного, кроме свойства caption-side (en-US), которое имеет значение bottom . В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке punk-bands-complete.html):

Активное обучение: Стилизация вашей собственной таблицы

Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то значительно более стильное и менее безвкусное чем наша таблица.

Стилизация таблицы быстрые советы

Короткий список наиболее полезных вещей рассмотренных выше:

Сделайте свою разметку простой и гибкой, например, используя для этого проценты, что сделает дизайн более отзывчивым.
Используйте table-layout (en-US) : fixed для более понятного поведения разметки, при этом легко установить ширину столбцов, установив ширину width для заголовков таблицы ( (en-US)).
Используйте border-collapse (en-US) : collapse , которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.
Используйте (en-US), (en-US) и чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это даёт возможность накладывать стили друг на друга, если это необходимо.
Используйте полоски зебры, чтобы облегчить чтение между строк.
Используйте text-align чтобы выровнять текст в (en-US) и для более аккуратного и удобного оформления.

Заключение

Несмотря на головокружительные успехи достигнутые в стилизации таблиц, у нас есть ещё кое-что чем мы можем занять наше время. В следующей главе мы рассмотрим некоторые продвинутые эффекты, уже устоявшиеся (например, тени box shadows) и те которые только недавно появились в браузерах, такие как режимы наложения blend-mode и фильтры.

В этом блоке

Box model recap
Backgrounds
Borders
Стилизация таблиц
Advanced box effects
Creating fancy letterheaded paper (en-US)
A cool looking box (en-US)

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 3 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.