Как убрать рамку в таблице html

Народ доброго дня. HTML сегодня первый раз начал разбирать.
Сделал таблицу . Хочу чтобы у произвольной ячейки не было рамки.
Как ?

border же необязательный атрибут
А вообще на HTML пишут структуру сайта, а оформление уже на CSS

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

(2) Это не сайт, а настройка оповещений) рамка у таблицы должна быть, но у последней ячейки мне надо ее убрать. Как ?)

Вот что наваял:

Акт приемки

От кого:
ВставитьОтКого

На склад:
ВставитьСклад

№ п/п

Наименование

В упак.

Упак./Штук

Кол-во

Принято фактически

Срок хранения (дн.)

Дата изготовления

Срок реализации

Упак./Штук

Кол-во

Итого:

ИтогоК

ИтогУФ

ИтогКФ

Задать скругления и убрать двойную рамку в

Сделал таблицу представленную кодом.
border-collapse: collapse; устанавливает одинарную рамку.
border-radius: 10px; устанавливает закругления Установив одинарную рамку, но при этом не работает закругления, а нужно сверстать таблицу, как на картинке. Вопрос: Как я могу сделать закругления, установив при этом одинарную рамку?

table < text-align: center; border: 1px solid grey; border-radius: 10px; >td, th < border: 1px solid black; /* Параметры рамки */ >.table-top-row < height: 10px; >.table-bottom-row

  Услуги  Стоимость 
по категориям сложности  Cроки изготовления 
рабочих дней  
 1  2  3  
 Диспенсер  1500  3000  5500  7 - 14  
 Воблер  1500  3000  5500  7 - 14

Как удалить рамку у таблицы?

Есть таблицы. У таблицы есть рамка. Подскажите, как можно убрать рамку только у предпоследней строчки в таблице?

Вопрос задан более года назад
997 просмотров

2 комментария

Простой 2 комментария

AntonLitvinenko

Антон Литвиненко @AntonLitvinenko
row:nth-last-child(2)

Ankhena

Ankhena @Ankhena Куратор тега CSS

Я бы модифицировала наоборот. Не отменять свойства, а задавать только нужным
tr:not(:nth-last-child(2)) <>

Решения вопроса 0
Ответы на вопрос 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

Ответ написан более года назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

HTML
+1 ещё

Как пофиксти проблему с амперсантом?

1 подписчик
11 часов назад
54 просмотра

Руководство по HTML-таблицам

В этом руководстве мы расскажем, как с помощью tr HTML создавать таблицы и задавать для них стили с помощью CSS .

Основные элементы таблицы

Также с помощью элемента можно добавлять заголовки:

  Table Header  Table Header  Table Header  
 Table cell  Table cell  Table cell  
 Table cell  Table cell  Table cell

Table Header	Table Header	Table Header
Table cell	Table cell	Table cell
Table cell	Table cell	Table cell

Просмотреть код с помощью онлайн-редактора

Рамка таблицы

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

Вместо этого более эффективно определить рамку во вложенной или внешней таблице стилей. Таким образом, в пределах одного объявления можно применить рамку для всех tr td HTML .

Для этого поместите стили рамки внутри .

 table, th, td

После добавления этих стилей ваш документ будет выглядеть следующим образом:

   Table Example table, th, td   Table Header  Table Header  Table Header  
 Table cell  Table cell  Table cell  
 Table cell  Table cell  Table cell

Table Header	Table Header	Table Header
Table cell	Table cell	Table cell
Table cell	Table cell	Table cell

Просмотреть код с помощью онлайн-редактора

Спецификация HTML5 включает в себя атрибут border для таблицы, использование которого решает большинство целей разработки. Можно применять border=»0″, чтобы убрать рамку, или border=»1″, чтобы добавить ее. Но HTML не содержит способов задать стили рамки, поэтому большинство разработчиков используют CSS для оформления рамок таблиц.

Объединение рамок

По умолчанию, соседние ячейки имеют собственные рамки. Это может привести к возникновению » двойной рамки «.

Но большинство разработчиков предпочитают объединять все в одну сплошную рамку. Чтобы объединить сделать это, добавьте следующие строки кода:

border-collapse: collapse;

Теперь документ с тегом tr в HTML будет выглядеть так:

   Table Example table, th, td   Table Header  Table Header  Table Header  
 Table cell  Table cell  Table cell  
 Table cell  Table cell  Table cell

Table Header	Table Header	Table Header
Table cell	Table cell	Table cell
Table cell	Table cell	Table cell

Просмотреть код с помощью онлайн-редактора

Поля ячеек

С помощью свойства CSS padding можно задать поля для ячеек и указать HTML tr height . Например, чтобы применить поля в 5 пикселей, добавьте следующую строку:

padding: 5px;

Теперь документ будет выглядеть следующим образом:

   Table Example table, th, td   Table Header  Table Header  Table Header  
 Table cell  Table cell  Table cell  
 Table cell  Table cell  Table cell

Table Header	Table Header	Table Header
Table cell	Table cell	Table cell
Table cell	Table cell	Table cell

Просмотреть код с помощью онлайн-редактора

Ширина таблицы

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

Вот пример использования процентов для HTML table tr :

table

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

Теперь документ будет выглядеть следующим образом:

   Table Example table < width: 100%; >table, th, td   Table Header  Table Header  Table Header  
 Table cell  Table cell  Table cell  
 Table cell  Table cell  Table cell

Table Header	Table Header	Table Header
Table cell	Table cell	Table cell
Table cell	Table cell	Table cell

Просмотреть код с помощью онлайн-редактора

Изменение цвета фона

HTML tr colo r можно задать с помощью свойства CSS background-color .

Можно применить цвет фона для всей таблицы, или только ее части. Например, ячеек, определенных строк и т.д.
Используем CSS , чтобы применить чередующиеся цвета к строкам таблицы. Первая строка будет иметь цвет А , вторая будет иметь цвет B , третья снова цвет А , четвертая снова цвет B и так далее.

Для этого используйте селектор псевдокласса CSS :nth-child со значениями odd и even , чтобы определить цвет фона четных и нечетных строк:

table.alt tr:nth-child(even) < background-color: #eee; >table.alt tr:nth-child(odd)

Обратите внимание, что в этом примере я также создал класс, который называется alt , и применил его к таблице. А затем использовал этот класс как часть селектора CSS . Таким образом, если в документе есть больше одной таблицы, эти стили будут применены только к HTML table tr td с классом alt .

Теперь документ будет выглядеть следующим образом:

   Table Example table < width: 100%; >table, th, td < border-collapse: collapse; padding: 5px; >table.alt tr:nth-child(even) < background-color: #eee; >table.alt tr:nth-child(odd)  Table Header  Table Header  
 Table cell  Table cell  
 Table cell  Table cell  
 Table cell  Table cell  
 Table cell  Table cell  
 Table cell  Table cell

Table Header	Table Header
Table cell	Table cell
Table cell	Table cell
Table cell	Table cell
Table cell	Table cell
Table cell	Table cell

Просмотреть код с помощью онлайн-редактора

Colspan

Можно использовать атрибут colspan , чтобы одна ячейка охватывала несколько столбцов. Для этого укажите количество столбцов, которые должна охватывать ячейка.

Вот пример заголовка HTML table tr td , который охватывает два столбца:

  Table Header  Table Header  
 Table cell  Table cell  Table cell  
 Table cell  Table cell  Table cell

Table Header	Table Header
Table cell	Table cell	Table cell
Table cell	Table cell	Table cell

Просмотреть код с помощью онлайн-редактора

Когда сделаете это, вам нужно будет удалить ненужные tr td HTML . В приведенном выше примере определено только два заголовка, хотя столбцов три.

RowSpan

RowSpan делает для строк то же, что colspan делает для столбцов ( rowspan позволяет растянуть ячейку на несколько строк ):

  Table Header  
 Table cell  Table cell  
 Table cell  Table cell  
 Table cell  Table cell

Table Header
Table cell	Table cell
Table cell	Table cell
Table cell	Table cell

Просмотреть код с помощью онлайн-редактора

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

Но на сегодняшний день не рекомендуется использовать HTML table tr td . Сейчас такие макеты могут создаваться с помощью HTML в сочетании с CSS .

HTML должен использоваться для определения структуры и логики документа. CSS следует применять для оформления его представления.

Элементы таблицы

Вот список элементов таблицы, доступных в HTML5 :

Вадим Дворников автор-переводчик статьи « HTML Table Tutorial »

Как убрать рамку в таблице html