Границы HTML таблиц без CSS
Создание визуальных границ у HTML таблиц без использования CSS и атрибута border тега table:
Header | Header |
---|---|
Data | Data |
HTML код:
<table cellspacing="3" bgcolor="#000000">
<tr bgcolor="#ffffff">
<th>Header</th>
<th>Header</th>
</tr>
<tr bgcolor="#ffffff">
<td>Data</td>
<td>Data</td>
</tr>
</table>
Границы HTML таблиц без CSS
Некогда, главным образом (но не только) в 1990ые существовало несколько приемов HTML, использовавшихся, чтобы добиться некоторых эффектов, которые ныне делаются с помощью CSS. Обращение с границами HTML таблиц было одним из них.
В данном случае, на самом деле, имеет место не обращение с границами, а его имитация через использование атрибутов cellspacing и bgcolor. Аналогично тому, как в настоящее время обстоит дело с HTML выравниванием по центру, этот способ вполне работающий, даже если в большинстве случаев более удобно примененять CSS.
Общая идея
- Атрибут bgcolor тега table задает фон указанного цвета.
- Атрибут bgcolor тега tr используется, чтобы фон содержимого таблицы (то есть, строки и ячейки) стал указанного цвета, отличающегося от фона тега table.
- Атрибут cellspacing тега table создает пространство вокруг ячеек таблицы. Это пространство получает цвет, установленный атрибутом bgcolor тега table, а поскольку он отличается от фона строк и ячеек, это создает вокруг ячеек визуальные границы цвета фона таблицы.
Древние Netscape, Mozilla и Arachne
Создание границ HTML таблиц без CSS используется с самых ранних времен Интернета. Так что после некоторой корректировки будет работать в Netscape 3.04 - 6.0, Mozilla 0.6 - 1.7.13 и в Arachne, браузере для DOS:
|
HTML код:
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#000000">
<tr>
<td>
<table cellspacing="3" border="0">
<tr bgcolor="#ffffff">
<th>Header</th>
<th>Header</th>
</tr>
<tr bgcolor="#ffffff">
<td>Data</td>
<td>Data</td>
</tr>
</table>
</td>
</tr>
</table>
Примечание: этот скорректированый HTML код роботает не только в Netscape 3.04 - 6.0, Mozilla 0.6 - 1.7.13 или Arachne, но так же и во всех браузерах и их версиях, перечисленных в секции "Поддержка в браузерах": как современных, так и старых.
Поддержка в браузерах
- Windows
- Internet Explorer 3.0+
- Firefox 1.0+
- Google Chrome
- Opera 2.12+
- Safari 3.1+
- SeaMonkey 1.0+
- Mozilla 1.0+
- Netscape 7.0+
- Linux
- Firefox 1.0+
- Google Chrome / Chromium
- Opera 5.0+
- SeaMonkey 1.0+
- Mozilla 1.0+
- Netscape 7.0+
- NetSurf 3.0
- Dillo 3.0.2