Примеры с сайта htmlbook

Котяра · June 11, 2008

Уфф... на сайте htmlbook не написано, как сделать табличку красивую с примерами. Еле код вылазил нужный. Хочу поделится.

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Хорошая табличка!</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<link rel="StyleSheet" type="text/css" href="style.css">
</head>
<body>


<table border="0" align="left"><tr><td>
<p class="exampleTitle"><!-- Ну то что там было допустим "Пример 1. Начальный код документа" Заголовок таблицы как-бы --></p>
<p class="example"><!-- Содержимое таблицы --></p></td></tr></table>
</head>
</html>

style.css

.exampleTitle, .noteTitle {
 border: 1px solid black;
 border-bottom: none;
 padding: 3px;
 display: inline;
 background: #efecdf;
 font-weight: bold;
 font-size: 90%;
 margin: 0;
 white-space: nowrap;
}

.example {
 border: dashed 1px #634F36;
 background: #fffff5;
 font-family: "Courier New", Courier, monospace; 
 padding: 7px;
 margin: 0 0 1em;
}

/* А это не касается таблички */
body {
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 90%;
 color: #000;
 margin: 0;
 padding: 0px;
 background: #fff;
}

sandro-css · December 30, 2008

И в чем тут красивости таблицы?

kalyaka-malyaka · December 30, 2008

а зачем вам два </head>?

а где у вас </body>?

и <table border="0" align="left"> не совместимо с вашим строгим доктайпом. да и не нужна эта оговорка. убрав ее, ничего не меняется - по умолчанию таблица к левому краю страницы прибита.

насчет красивасти тоже не поняла, сорри.

Victor Ananiev · December 30, 2008

А вы видели какой давности топик? уже пол года прошло, и мнение о красоте изменилось

kalyaka-malyaka · December 30, 2008

А вы видели какой давности топик? уже пол года прошло, и мнение о красоте изменилось

гы

не-а, не видела

последнее сообщение загорелось, и я поперлась отвечать

sandro-css · December 31, 2008

Млин, я тоже не посмотрел

Sign In

Примеры с сайта htmlbook

Recommended Posts

Котяра

Link to comment

Share on other sites

sandro-css

Link to comment

Share on other sites

kalyaka-malyaka

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

kalyaka-malyaka

Link to comment

Share on other sites

sandro-css

Link to comment

Share on other sites

Обсуждения

Forums

Important Information