Html таблица без рамки: Таблица без рамки | htmlbook.ru

Leave a Comment / Html / By /

Таблица без рамки | htmlbook.ru

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

Рис. 1. Вид таблицы без рамки

Для изменения цвета фона таблицы используем свойство background, добавляя его к селектору TABLE. Для красоты внизу таблицы рисуем линию с помощью свойства border-bottom (пример 1).

Пример 1. Создание таблицы без рамки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border-bottom: 2px solid maroon; /* Линия внизу таблицы */
    background: #fffacd; /* Цвет фона таблицы */
   }
   TH {
    background: maroon; /* Цвет фона заголовка */
    color: white; /* Цвет текста */
    text-align: left; /* Выравнивание по левому краю */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body> 
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Поскольку содержимое тега <th> исходно выравнивается по центру, то для изменения этой характеристики в данном примере применяется стилевое свойство text-align со значением left.

Можно поступить наоборот и задать выравнивание по центру для ячеек <td>. Но содержимое первой колонки с названиями камней лучше оставить выровненным по левому краю. Чтобы установить для разных колонок различное выравнивание содержимого рассмотрим два способа.

Первый метод заключается в использовании тега <col>, он добавляется в контейнер <table> и устанавливает, в частности, выравнивание для отдельных колонок (пример 2).

Пример 2. Выравнивание с помощью тега <col>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border-bottom: 2px solid maroon; /* Линия внизу таблицы */
    background: #fffacd; /* Цвет фона таблицы */
   }
   TH {
    background: maroon; /* Цвет фона заголовка */
    color: white; /* Цвет текста */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body> 
  <table cellspacing="0">
  <!-- Выравнивание первой колонки по левому краю -->
  <col align="left">
 
  <!-- Выравнивание остальных колонок по центру -->
  <col span="3" align="center">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Атрибут align тега <COL> указывает, по какой стороне выравнивать ячейки колонки, а span определяет число колонок, к которым будут применяться заданные параметры. Если этот атрибут отсутствует, то тег <col> работает только для одной колонки.

Выравнивание содержимого колонок с помощью тега <col> работает в браузере Internet Explorer и не действует в браузере Firefox и некоторых других.

Второй метод универсальный, работает во всех браузерах и основан на добавлении отдельного класса для определенных ячеек.

Создаем стилевой класс, например, с именем jewel и применяем его к ячейкам левой колонки (пример 3).

Пример 3. Выравнивание с помощью стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    width: 300px; /* Ширина таблицы */
    border-bottom: 2px solid maroon; /* Линия внизу таблицы */
    background: #fffacd; /* Цвет фона таблицы */
   }
   TH {
    background: maroon; /* Цвет фона заголовка */
    color: white; /* Цвет текста */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг текста */
    text-align: center; /* Выравнивание по центру */
   }
   TD. jewel {
    text-align: left; /* Выравнивание по левому краю */
    background: #ccc; /* Цвет фона */
   }
  </style>
 </head> 
 <body> 
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

В данном примере изменяется цвет фона и способ выравнивания для всех ячеек, где установлен атрибут. Результат примера показан на рис. 2.

Рис. 2. Таблица без рамки с выделенной левой колонкой

CSSтаблицы

HTML по теме

  • Тег <col>
  • Тег <colgroup>
  • Тег <table>
  • Тег <td>
  • Тег <th>

CSS по теме

  • background
  • border-bottom
  • text-align

Добавление рамки и заголовка к таблице

  • Рамка таблицы
  • Заголовок таблицы

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

Тег <table> может иметь необязательный атрибут border, управляющий границами таблицы.

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

По стандарту HTML5 значением атрибута border может быть либо 1, либо пустая строка (обозначается как пара двойных кавычек «»). Не важно, какое значение атрибута вы зададите, если он присутствует, то рамка будет отображаться:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>
  <body>

    <h5>Таблица с рамкой:</h5>
    <table border="1">
      <tr><td>Первая</td><td>строка</td></tr>
      <tr><td>Вторая</td><td>строка</td></tr>
    </table>
    <h5>Таблица без рамки:</h5>
    <table>
      <tr><td>Первая</td><td>строка</td></tr>
      <tr><td>Вторая</td><td>строка</td></tr>
    </table>

  </body>
</html>

Попробовать »

Если вам не нравится вид рамки у таблицы, заданный по умолчанию, т. е. двойные рамки, вы можете воспользоваться атрибутом style, прописав в нем CSS свойство border-collapse со значением collapse, это придаст рамке стандартный вид:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>
  <body>

    <table border="1">
      <tr><td>ячейка 1</td><td>ячейка 2</td></tr>
      <tr><td>ячейка 3</td><td>ячейка 4</td></tr>
    </table>

  </body>
</html>

Попробовать »

Заголовок таблицы

У каждой таблицы обычно бывает заголовок, описывающий ее содержимое. Для создания заголовка таблицы используется тег <caption>, обычно он размещается сразу после открывающего тега <table>, но также он может располагаться практически в любом месте внутри таблицы между элементами <tr>.

Тег заголовка может содержать в себе любые элементы, которые можно использовать в теле HTML-документа. По умолчанию содержимое тега <caption> отображается над таблицей и выравнивается по ее центру. Расположение заголовка можно изменить применив к нему CSS свойство caption-side:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>
  <body>

    <table border="1">
      <caption>Моя первая таблица</caption>
      <tr><td>строка 1, ячейка 1</td><td>строка 1, ячейка 2</td></tr>
      <tr><td>строка 2, ячейка 1</td><td>строка 2, ячейка 2</td></tr>
    </table>

  </body>
</html>

Попробовать »

С этой темой смотрят:

  • Как сделать таблицу в html
  • Объединение ячеек в html таблице
  • HTML тег <table>
  • Оформление таблиц

html — Удаление границы с ячеек таблицы

Я знаю, что это глупый вопрос, но я, кажется, совершенно забыл, как это сделать.

У меня есть таблица HTML

, и я хочу удалить все границы вокруг всех ячеек, чтобы вокруг всей таблицы была только одна граница.

Мой код выглядит так:

 
  •  html
  •  css
  •  xhtml
  •  html-таблица
 0
 Просто сверните границы таблицы и удалите границы с ячеек таблицы ( td  элементов).
 таблица {
    граница: 1px сплошная #CCC;
    граница коллапса: коллапс;
}
тд {
    граница: нет;
}
 
 Без явной настройки  border-collapse  кросс-браузерное удаление границ ячеек таблицы не гарантируется.
 2
 Атрибут HTML для этой цели:  rules=none  (должен быть вставлен в тег  таблицы ).
 1
 Вероятно, вам просто нужно это правило CSS:
 table {
   интервал между границами: 0px;
}
 
 http://jsfiddle.net/Bz3Jt/3/
 

 

  
 
Ваша тачка
 

    Продукт
    Описание
    Цена
    Количество
    Всего
    Удалить