<html>
<head>
<title>test</title>
<meta http-equiv="Content-type" content="text/html; charset=cp1251">
<style>
<!--
html, body
{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
table.pixy
{
position: relative;
border: none;
z-index: 2;
background: transparent;
padding: 0;
margin: 0;
empty-cells: show;
}
table.pixy tr
{
padding: 0;
background: transparent;
border: none;
}
table.pixy tr td
{
padding: 0;
width: 6px;
height: 6px;
border: none;
background-color: #ffffff;
}
td#pixy-root
{
border: none;
padding: 0px;
width: 80px;
height: 80px;
vertical-align: top;
}
// -->
</style>
</head>
<body>
<table style="width: 100%; height: 100%;">
<tr>
<td align=center>
<table cellspacing=0 style="border: 1px solid #000000; z-index: 1">
<tr>
<td id=pixy-root>
<table cellspacing=0 class=pixy style="left: -1; top: -1;">
<tr>
<td></td>
</tr>
</table>
<table cellspacing=0 class=pixy style="left: 75; top: -7;">
<tr>
<td></td>
</tr>
</table>
<table cellspacing=0 class=pixy style="left: -1; top: 63;">
<tr>
<td></td>
</tr>
</table>
<table cellspacing=0 class=pixy style="left: 75; top: 57;">
<tr>
<td></td>
</tr>
</table>
<div align=center>Текст.</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Про углы в таблице
Возможно ли скрыть углы именно углы ячейки/таблицы средствами самой html-таблицы?
(на одном форуме мне сказали, что нет, я сам так думаю, но вдруг можно:))
(на одном форуме мне сказали, что нет, я сам так думаю, но вдруг можно:))
CSS-свойства td - средства самой таблицы или нет?
Цитата:
Originally posted by pwestre
CSS-свойства td - средства самой таблицы или нет?
CSS-свойства td - средства самой таблицы или нет?
Именно так
Код:
Если постараться, думаю можно написать либу которая будет приводить таблицы к подобному виду без ущерба для содержимого и кросс-браузерности=)
Пытался нарисовать надгробный крест тем же методом. Нехватило терпения=) От таблиц к сожалению остается всякий хлам.. ни padding, ни margin, но все ж оступ H = высота таблицы. неприятный нюанс, можно побороть div'ом, но у того свои замашки=)
Кстати, сильно удивило то, что во всех трех установленных у меня браузерах (виндовых), эт Opera 8.x, IE 6.x, FF 1.02 результаты то-ли один в один соответствуют, то ли практически равны между собой) Только вот в примере ниже ie кажись с border'ами подкачал. Или я недосмотрел=) Эт всё, на близжайшее время.
ps: возник помоему логичный вопрос, а есть ли такие креатифф ресурсы, где человеки рисуют пейзажи и портреты пользуясь только css и html?:D
Кстати, сильно удивило то, что во всех трех установленных у меня браузерах (виндовых), эт Opera 8.x, IE 6.x, FF 1.02 результаты то-ли один в один соответствуют, то ли практически равны между собой) Только вот в примере ниже ie кажись с border'ами подкачал. Или я недосмотрел=) Эт всё, на близжайшее время.
Код:
<html>
<head>
<title>test</title>
<meta http-equiv="Content-type" content="text/html; charset=cp1251">
<style>
<!--
html, body
{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: #cccccc;
}
table.pixy
{
position: relative;
border: none;
z-index: 2;
background: transparent;
padding: 0;
margin: 0;
empty-cells: show;
}
table.pixy tr
{
padding: 0;
background: transparent;
border: none;
}
table.pixy tr td
{
padding: 0;
width: 25px;
height: 25px;
border: none;
background-color: #cccccc;
}
td#pixy-root
{
border: none;
padding: 0px;
width: 80px;
height: 80px;
vertical-align: top;
background-color: red;
}
// -->
</style>
</head>
<body>
<table style="width: 100%; height: 100%;">
<tr>
<td align=center>
<table cellspacing=0 style="border: 1px solid #000000; z-index: 1">
<tr>
<td id="pixy-root">
<table cellspacing=0 class=pixy style="left: -1; top: -1;">
<tr>
<td style="border-color: black; border-style: solid; border-width: 0px 1px 1px 0px;"></td>
</tr>
</table>
<table cellspacing=0 class=pixy style="left: 55; top: -26;">
<tr>
<td style="border-color: black; border-style: solid; border-width: 0px 0px 1px 1px;"></td>
</tr>
</table>
<table cellspacing=0 class=pixy style="left: -1; top: 1;">
<tr>
<td style="border-color: black; border-style: solid; border-width: 1px 1px 1px 0px;"></td>
</tr>
</table>
<table cellspacing=0 class=pixy style="left: 55; top: -24;">
<tr>
<td style="border-color: black; border-style: solid; border-width: 1px 0px 1px 1px;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<head>
<title>test</title>
<meta http-equiv="Content-type" content="text/html; charset=cp1251">
<style>
<!--
html, body
{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: #cccccc;
}
table.pixy
{
position: relative;
border: none;
z-index: 2;
background: transparent;
padding: 0;
margin: 0;
empty-cells: show;
}
table.pixy tr
{
padding: 0;
background: transparent;
border: none;
}
table.pixy tr td
{
padding: 0;
width: 25px;
height: 25px;
border: none;
background-color: #cccccc;
}
td#pixy-root
{
border: none;
padding: 0px;
width: 80px;
height: 80px;
vertical-align: top;
background-color: red;
}
// -->
</style>
</head>
<body>
<table style="width: 100%; height: 100%;">
<tr>
<td align=center>
<table cellspacing=0 style="border: 1px solid #000000; z-index: 1">
<tr>
<td id="pixy-root">
<table cellspacing=0 class=pixy style="left: -1; top: -1;">
<tr>
<td style="border-color: black; border-style: solid; border-width: 0px 1px 1px 0px;"></td>
</tr>
</table>
<table cellspacing=0 class=pixy style="left: 55; top: -26;">
<tr>
<td style="border-color: black; border-style: solid; border-width: 0px 0px 1px 1px;"></td>
</tr>
</table>
<table cellspacing=0 class=pixy style="left: -1; top: 1;">
<tr>
<td style="border-color: black; border-style: solid; border-width: 1px 1px 1px 0px;"></td>
</tr>
</table>
<table cellspacing=0 class=pixy style="left: 55; top: -24;">
<tr>
<td style="border-color: black; border-style: solid; border-width: 1px 0px 1px 1px;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
ps: возник помоему логичный вопрос, а есть ли такие креатифф ресурсы, где человеки рисуют пейзажи и портреты пользуясь только css и html?:D