Стиль для всех таблиц на сайте.

Ururu · May 2, 2009

Сама таблица выводится при помощи php, так же задаются некоторые параметры. Но во всех таблицах очень много общего. Хочу все это объеденить в css. Как это нарисовать для всех таблиц сразу? Только через класс?

CoDy · May 2, 2009

table.mytable {для таблици в челом}

mytable tr {для строк таблиц, свойство клас, которых равно 'mytable'}

mytable td {для ячеек таблиц, свойство клас, которых равно 'mytable'}

при присвоении таблице класа mytable? свойства для tr и td будут применяться автоматом.

Ururu · May 2, 2009

Аха про Еже и Петручо =))))

Суть вопроса "как кроме класса?".

П.С. Борюсь за простоту,меньше букаф, ближе к идеалу.

Victor Ananiev · May 2, 2009

а чем вас класс не устраивает, это самое короткое..

Ururu · May 2, 2009

Таблица выводится в php, хотел уменьшить до простого <table>

Victor Ananiev · May 2, 2009

лучший способ через класс)

CoDy · May 2, 2009

Можно и без класа:

* table {для таблици в челом}

* tr {для строк таблиц, свойство клас, которых равно 'mytable'}

* td {для ячеек таблиц, свойство клас, которых равно 'mytable'}

но стили всех таблиц будут одинаковы

Ururu · May 3, 2009

В том и штука, что подключаю через файл css и оно не работает.

CoDy · May 3, 2009

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

Ururu · May 3, 2009

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>index</title>
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style/global.css"></head>
<body>
<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" type="application/x-shockwave-flash" data="flash/logo.swf" width="800px" height="50px">
<param name="movie" value="logo.swf">
<object data="img/logo.png" type="image/png" width="800px" height="50px">
<p><b><font size="6">index</font></b></p>
</object>
</object></div>

<div id="sub-section">
<div id="time">
		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" type="application/x-shockwave-flash" data="flash/time.swf" width="200px" height="30px">
				<param name="movie" value="time.swf">
			<object data="img/time.gif" type="image/gif" width="200px" height="30px">
				<p><b>index</b></p>
			</object>
		</object></div>
</div>

<div id="main">
<div id="leftcol">
<p><a href="amp.php"><img src="button/button.gif" width="190" height="40" alt="button"></a></p><br>
<p><a href=""><img src="button/button.gif" width="190" height="40" alt="button"></a></p><br>
<p><a href=""><img src="button/button.gif" width="190" height="40" alt="button"></a></p><br>
<p><a href=""><img src="button/button.gif" width="190" height="40" alt="button"></a></p><br>
<p><a href=""><img src="button/button.gif" width="190" height="40" alt="button"></a></p></div>
<div id="rightcol"></div>
<div id="content">
<br><center>
<a href="amp.php?inc=a"><b>A</b></a> |
<a href="amp.php?inc=b"><b>B</b></a> |
<a href="amp.php?inc=c"><b>C</b></a> |
<a href="amp.php?inc=d"><b>D</b></a> |
<a href="amp.php?inc=e"><b>E</b></a> |
<a href="amp.php?inc=f"><b>F</b></a> |
<a href="amp.php?inc=g"><b>G</b></a> |
<a href="amp.php?inc=h"><b>H</b></a> |
<a href="amp.php?inc=i"><b>I</b></a> |
<a href="amp.php?inc=j"><b>J</b></a> |
<a href="amp.php?inc=k"><b>K</b></a> |
<a href="amp.php?inc=l"><b>L</b></a> |
<a href="amp.php?inc=m"><b>M</b></a> |
<a href="amp.php?inc=n"><b>N</b></a> |
<a href="amp.php?inc=o"><b>O</b></a> |
<a href="amp.php?inc=p"><b>P</b></a> |
<a href="amp.php?inc=q"><b>Q</b></a> |
<a href="amp.php?inc=r"><b>R</b></a> |
<a href="amp.php?inc=s"><b>S</b></a> |
<a href="amp.php?inc=t"><b>T</b></a> |
<a href="amp.php?inc=u"><b>U</b></a> |
<a href="amp.php?inc=v"><b>V</b></a> |
<a href="amp.php?inc=w"><b>W</b></a> |
<a href="amp.php?inc=x"><b>X</b></a> |
<a href="amp.php?inc=y"><b>Y</b></a> |
<a href="amp.php?inc=z"><b>Z</b></a> |
<a href="amp.php?inc=num"><b>Num</b></a>
</center><br>
<center>
<input type="text" name="search" size="25" maxlength="20" value="Найти"> 
<input type="submit" value="Поиск">
</center>
<br>
<table class='table' bgcolor='FFFFFF' cellspacing='0' cellpadding='5' border='1' width='100%'><tr><td>1</td><td>A</td><td>Assembly Source Code (Макинтош)</td></tr><tr><td>2</td><td>A</td><td>Image Alchemy File (Handmade Software, Inc.)</td></tr><tr><td>3</td><td>A</td><td>Unknown Apple II File (found on Golden Orchard Apple II CD Rom) </td></tr><tr><td>4</td><td>A</td><td>Free Pascal Archive File for Linux or DOS Version (FPC Development Team)</td></tr><tr><td>5</td><td>A</td><td>ADA Program </td></tr><tr><td>6</td><td>a</td><td>UNIX Static Object Code Library </td></tr><tr><td>7</td><td>A00</td><td>Archive Section </td></tr><tr><td>8</td><td>A01</td><td>ARJ Multi-volume Compressed Archive (can be 01 to 99) (also see .000) (can be 01 to 99) (also see .000) </td></tr><tr><td>9</td><td>A01</td><td>Archive Section </td></tr><tr><td>10</td><td>A01</td><td>OzWin CompuServe E-mail/Forum Access SYSOP File </td></tr><tr><td>11</td><td>A02</td><td>Archive Section 

<!-- здесь огромный кусок таблицы -->


eBook Format (Amazon.com, Inc.)</td></tr><tr><td>1495</td><td>AZW1</td><td>Kindle eBook Format (Amazon.com, Inc.)</td></tr><tr><td>1496</td><td>AZX</td><td>ZX Audio Sound File </td></tr><tr><td>1497</td><td>AZZ</td><td>AZZ Cardfile Information Card (Antanas Zdramys)</td></tr><tr><td>1498</td><td>A_T</td><td>Atrain</td></tr></table></div>
</div>
<div id="footer">
<div id="copyright">
			Copyright © 2009 Ururu</div>
<div id="count" align="right">
			<a href="http://validator.w3.org/check?uri=referer">
				<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88">
			</a>

			<a href="http://jigsaw.w3.org/css-validator/check/referer">
				<img src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Правильный CSS!" height="31" width="88">
			</a></div>
</div></body>
</html>

css

* {
	padding: 0;
	margin: 0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
}
#header {
	background-color: #8B7D6B; /* Цвет фона Bisque4	139 125 107 #8B7D6B */
	height: 50px; /* Высота блока */
	width: 100%; /* Ширина блока */
	color: #FFFFFF; /* Цвет текста White 255 255 255 #FFFFFF */
	text-align: center;
}
#sub-section {
	background-color: #CDAF95; /* Цвет фона PeachPuff3 205 175 149 #CDAF95 */
	height: 30px; /* Высота блока */
	width: 100%; /* Ширина блока */
}
#time {
	background-color: #CDAF95; /* Цвет фона PeachPuff3 205 175 149 #CDAF95 */
	width: 200px; /* Ширина слоя */
	float: left; /* Обтекание по правому краю */
	margin: 0; /* Отступ*/
	height: 30px; /* Высота слоя */
	text-align: center;
}
#main {
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
	width: 100%; /* Ширина блока */
	min-height: 489px; /* Минимальная высота */
}
#leftcol {
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
	margin: 5px 0px 0px 5px; /* Отступ*/
	width: 200px; /* Ширина слоя */
	float: left; /* Обтекание по правому краю */
	min-height: 480px; /* Минимальная высота */
	text-align: center;
}
#content {
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
	margin: 0 212px; /* Отступ*/
	min-height: 480px; /* Минимальная высота */
}
#rightcol {
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
	color: #458B00; /* Цвет текста Chartreuse4 69 139 0 #458B00 */
	margin: 5px 5px 0px 0px; /* Отступ*/
	width: 200px; /* Ширина слоя */
	float: right; /* Обтекание по левому краю */
	min-height: 480px; /* Минимальная высота */
	text-align: center;
}
#footer {
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
	color: #000000; /* Цвет текста Black 0 0 0 #000000 */
	float: left; /* Обтекание по правому краю */
	height: 31px; /* Высота блока */
	width: 100%; /* Ширина блока */
}
#copyright {
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
	color: #000000; /* Цвет текста Black 0 0 0 #000000 */
	width: 200px; /* Ширина слоя */
	float: left; /* Обтекание по правому краю */
	height: 31px; /* Высота */
	text-align: center;
}
#count {
	background-color: #FFFFF0; /* Цвет фона Ivory1 255 255 240 #FFFFF0 */
	color: #000000; /* Цвет текста Black 0 0 0 #000000 */
	float: right; /* Обтекание по левому краю */
	height: 31px; /* Высота */
	margin-left: 210px; /* Отступ*/
}

И вот собственно это в css работать отказывается.

<table class='table' bgcolor='FFFFFF' cellspacing='0' cellpadding='5' border='1' width='100%'>

Edited May 3, 2009 by Ururu

Nekromancer · May 3, 2009

в упор не вижу в цсс стиля для table или хотя бы для .table

Ururu · May 3, 2009

указал его в теге table в html, так как работало ток так

если пытаюсь прописать в css, то не реагирует

CoDy · May 3, 2009

в css добавь:

.mytable {

width: 100%;

border-spacing: 0;

background: #fff;

border: #000 solid 1px;

}

.mytable td {

padding: 5px;

border: #000 solid 1px;

}

в html замени обявление таблици на следующее:

должно работать

Ururu · May 3, 2009

так и писал что через классы работает, вот без них бы..

CoDy · May 3, 2009

<_< )

сори, потарял суть вопроса.

вот пропиши в css и все будет работать без классов:

* table {

width: 100%;

border-spacing: 0;

background: #fff;

border: #000 solid 1px;

}

* table td {

padding: 5px;

border: #000 solid 1px;

}

Sign In

Стиль для всех таблиц на сайте.

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information