Как сделать так, чтобы внешняя граница таблицы отличалась от внутренней в HTML? - PullRequest
Новая
       26

Как сделать так, чтобы внешняя граница таблицы отличалась от внутренней в HTML?

1 голос
/ 26 марта 2012

Что я хочу, это

enter image description here

Что я получаю, это

enter image description here

Мой код 

<table border="2" cellpadding="10" bordercolor="blue">

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

Ответы [ 4 ]

3 голосов
/ 26 марта 2012

Здесь есть два возможных решения (из того, что я вижу):

  1. Оберните таблицу (со стандартной или серебряной рамкой) в div с синей рамкой.

  2. Вставьте таблицу (со стандартной или серебряной рамкой) в ячейку другой таблицы.Дайте «внешней» таблице синюю рамку.

Я думаю, что первый вариант намного лучше.

2 голосов
/ 26 марта 2012 
<table cellpadding="2"><tr><td bgcolor="blue">
<table border="1" frame="void" cellpadding="10" bgcolor="white">
  <tr><td>foo<td>bar
  <tr><td>foo<td>bar
</table>
</table>

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

Хитрость заключается в том, чтобы поместить реальную таблицу в таблицу с одной ячейкой, удалить таблицу вокруг реальной таблицы (frame="void") и установить цвет фона для ячейки, содержащей реальную таблицу. Цвет фона установлен на желаемый цвет границы. Реальная таблица тогда нуждается в белом фоне (или каков ваш общий фон), поскольку по умолчанию он будет прозрачным. Ширина поддельной границы контролируется cellpadding внешней таблицы.

Код действителен HTML 4.01 Transitional (тогда как атрибут bordercolor, хотя и широко поддерживается, недопустим).

Конечно, с таблицей стилей было бы намного проще. Помимо соревнования или домашнего задания с нечетными правилами, я могу представить себе только одну ситуацию: авторскую среду, в которой вы не можете внедрить элемент style или link и работать внутри body. Но даже там вы можете использовать элемент style - браузеры позволяют это, даже если спецификации этого не делают.

2 голосов
/ 26 марта 2012

Существует два способа определения правил стиля для страницы. Один из них - сделать это в отдельном файле и включить его в <link ... />, второй метод - использовать тег <style>, предпочтительно в <head> документа. 

<style type="text/css">
  table {
      border-color:#00F;
  }
  table td {
      border-color:#ccc;
  }
</style>

или что-то на этот счет, должно делать то, что вы хотите. Имейте в виду, я сказал, что лучше поместить стиль в <head>, но он может появиться в любом месте документа.

1 голос
/ 26 марта 2012

Вы можете задать цвет границы в таблице для требования к внешней границе таблицы и дать границу в таблице td для внутренней границы td.

см. Скрипку для лучшего понимания: - http://jsfiddle.net/nTFAF/4/

...