Выделение строки и столбца в таблице html

**PuPsAn** · 02.11.2013 12:46

Всем привет.
Нужна помощь в таблице, хочу сделать чтоб от основания до пересечения строки и столбца шло выделение фоном, нужно для навигации по прейскуранту.
Образец прилагаю.

**PuPsAn** · 02.11.2013 14:51

Код:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Скелет</title>


<style>
table {
	width:100%;
        font-family: Verdana, Arial, Helvetica, sans-serif; 
        font-size: 19pt;
}
td {
	text-align:center;
	background:silver;
	border:1px dotted black;
	border-color:blue;
        font-family: Verdana, Arial, Helvetica, sans-serif; 
        font-size: 9pt;
}
.dia td {
	font-size: 10pt;
	font-weight:bold;
	}
</style>

</head>
<body>

<table>
		<caption>ПРЕЙСКУРАНТ ЦЕН НА ШИНОМОНТАЖНЫЕ РАБОТЫ:</caption><br><br>
			<tr class="dia">
				<td>ЛЕГКОВЫЕ АВТОМОБИЛИ</td>
				<td>R13</td>
				<td>R14</td>
				<td>R15</td>
				<td>R16</td>
				<td>R16<br>&lt;50%<br>Runflat</td>
				<td>R17</td>
				<td>R17<br>&lt;50%<br>Runflat</td>
				<td>R18</td>
				<td>R18<br>&lt;50%<br>Runflat</td>
				<td>R19</td>
				<td>R20</td>
				<td>R21</td>
				<td>R22-24</td>
			</tr>
			<tr>
				<td>Монтаж</td>
				<td>60</td>
				<td>60</td>
				<td>70</td>
				<td>90</td>
				<td>120</td>
				<td>120</td>
				<td>150</td>
				<td>140</td>
				<td>170</td>
				<td>180</td>
				<td>190</td>
				<td>200</td>
				<td>230</td>
			</tr>
			<tr>
				<td>Демонтаж</td>
				<td>60</td>
				<td>60</td>
				<td>70</td>
				<td>90</td>
				<td>120</td>
				<td>120</td>
				<td>150</td>
				<td>140</td>
				<td>170</td>
				<td>180</td>
				<td>190</td>
				<td>200</td>
				<td>230</td>
			</tr>
</table>

</body>
</html>

**ArhStrAngeR** · 02.11.2013 15:03

PuPsAn,_http://htmlbook.ru/faq/kak-sdelat-chtoby-stroka-tablitsy-menyala-tsvet

**PuPsAn** · 02.11.2013 15:46

Этот способ я знаю :)
но нужно немного по другому, чтоб выделяло только то место где наведен курсор в виде угла как на картинке выше

**ArhStrAngeR** · 02.11.2013 15:58

PuPsAn,так нужно? http://arhstranger.ru/table/

**Brovik** · 02.11.2013 16:24

используйте псевдо класс ":hover", то есть надо прописать -
.MyClassTable:hover{background: #000}

при наведении на элемент в котором будет указан класс "MyClassTable" будет идти другой бекграунд, который вы укажете.

**PuPsAn** · 02.11.2013 17:33

Не совсем так, нужно именно как тут на картинке

чтоб ширина и высота луча сходилась в одну точку, точка это курсор мышки. без лишних лучей.
В данном случае это число 2560.

**druzhkov** · 02.11.2013 21:59

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

PHP код:

 class="x1 y2"

у горизонтальных заголовков

PHP код:

 class="x1"

у вертикальных заголовков

PHP код:

 class="y2"

т.е. пронумеровать всё в координатах x-y.

Далее по hover выдергиваем текущие классы наведенной ячейки, преобразуем, видим, что это, например, позиция x6, y9 . В цикле подсвечиваем все ячейки x1..x6, y9 и x6, y1..y9 (добавляем класс highlight). Ну и плюс ячейки заголовки.

Перед подсветкой еще не забыть сбросить подсветку вообще у всех ячеек таблицы, а то "след" будет сохраняться.

**PuPsAn** · 03.11.2013 10:39

druzhkov, Можно поподробнее как это сделать? :)) Если это php или javascript то я в них не алло к сожалению

((

**ArhStrAngeR** · 03.11.2013 12:34

PuPsAn,тогда вам проще заказать это.

	02.11.2013 12:46 #1
PuPsAn Новичок Регистрация: 05.08.2013 Сообщений: 12 Репутация: 0	Всем привет. Нужна помощь в таблице, хочу сделать чтоб от основания до пересечения строки и столбца шло выделение фоном, нужно для навигации по прейскуранту. Образец прилагаю. Миниатюры
0 PuPsAn

	02.11.2013 14:51 #2
PuPsAn Новичок Регистрация: 05.08.2013 Сообщений: 12 Репутация: 0	Код: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Скелет</title> <style> table { width:100%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 19pt; } td { text-align:center; background:silver; border:1px dotted black; border-color:blue; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; } .dia td { font-size: 10pt; font-weight:bold; } </style> </head> <body> <table> <caption>ПРЕЙСКУРАНТ ЦЕН НА ШИНОМОНТАЖНЫЕ РАБОТЫ:</caption><br><br> <tr class="dia"> <td>ЛЕГКОВЫЕ АВТОМОБИЛИ</td> <td>R13</td> <td>R14</td> <td>R15</td> <td>R16</td> <td>R16<br><50%<br>Runflat</td> <td>R17</td> <td>R17<br><50%<br>Runflat</td> <td>R18</td> <td>R18<br><50%<br>Runflat</td> <td>R19</td> <td>R20</td> <td>R21</td> <td>R22-24</td> </tr> <tr> <td>Монтаж</td> <td>60</td> <td>60</td> <td>70</td> <td>90</td> <td>120</td> <td>120</td> <td>150</td> <td>140</td> <td>170</td> <td>180</td> <td>190</td> <td>200</td> <td>230</td> </tr> <tr> <td>Демонтаж</td> <td>60</td> <td>60</td> <td>70</td> <td>90</td> <td>120</td> <td>120</td> <td>150</td> <td>140</td> <td>170</td> <td>180</td> <td>190</td> <td>200</td> <td>230</td> </tr> </table> </body> </html>
0 PuPsAn

	02.11.2013 15:03 #3
ArhStrAngeR Разработка любых сайтов Регистрация: 08.06.2011 Сообщений: 3,375 Записей в дневнике: 1 Репутация: 2506	PuPsAn,_http://htmlbook.ru/faq/kak-sdelat-chtoby-stroka-tablitsy-menyala-tsvet Разработка сайтов любой сложности! Ультрабыстрые SSD VPS по смешным ценам(промокод VPS - дает скидку 25%)
0 ArhStrAngeR

	02.11.2013 15:46 #4
PuPsAn Новичок Регистрация: 05.08.2013 Сообщений: 12 Репутация: 0	Этот способ я знаю :) но нужно немного по другому, чтоб выделяло только то место где наведен курсор в виде угла как на картинке выше
0 PuPsAn

	02.11.2013 15:58 #5
ArhStrAngeR Разработка любых сайтов Регистрация: 08.06.2011 Сообщений: 3,375 Записей в дневнике: 1 Репутация: 2506	PuPsAn,так нужно? http://arhstranger.ru/table/ Разработка сайтов любой сложности! Ультрабыстрые SSD VPS по смешным ценам(промокод VPS - дает скидку 25%)
0 ArhStrAngeR

Выделение строки и столбца в таблице html

Опции темы

Тэги топика:

Похожие темы

Вопрос по h1-h6 и таблице стилей в wordpress

Помощь по таблице на HTML

Выделение [b][/b] как на Вебмастерс.

Выделение внешних ссылок с помощью php-функции

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры

	02.11.2013 16:24 #6
Brovik Гуру Регистрация: 05.02.2012 Сообщений: 1,045 Репутация: 483 Webmoney BL: ?	используйте псевдо класс ":hover", то есть надо прописать - .MyClassTable:hover{background: #000} при наведении на элемент в котором будет указан класс "MyClassTable" будет идти другой бекграунд, который вы укажете. Биржа статей надежный и недорогой хостинг
0 Brovik

	02.11.2013 17:33 #7
PuPsAn Новичок Регистрация: 05.08.2013 Сообщений: 12 Репутация: 0	Не совсем так, нужно именно как тут на картинке чтоб ширина и высота луча сходилась в одну точку, точка это курсор мышки. без лишних лучей. В данном случае это число 2560.
0 PuPsAn

	02.11.2013 21:59 #8
druzhkov Дипломник Регистрация: 15.07.2013 Сообщений: 189 Репутация: 43 Webmoney BL: ?	PuPsAn, скорее всего, без дописывания дополнительных классов к ячейкам во время генерации не обойтись. Я бы сделал так: добавляем в каждой ячейке вот так: PHP код: `class="x1 y2"` у горизонтальных заголовков PHP код: `class="x1"` у вертикальных заголовков PHP код: `class="y2"` т.е. пронумеровать всё в координатах x-y. Далее по hover выдергиваем текущие классы наведенной ячейки, преобразуем, видим, что это, например, позиция x6, y9 . В цикле подсвечиваем все ячейки x1..x6, y9 и x6, y1..y9 (добавляем класс highlight). Ну и плюс ячейки заголовки. Перед подсветкой еще не забыть сбросить подсветку вообще у всех ячеек таблицы, а то "след" будет сохраняться.
0 druzhkov

	03.11.2013 10:39 #9
PuPsAn Новичок Регистрация: 05.08.2013 Сообщений: 12 Репутация: 0	druzhkov, Можно поподробнее как это сделать? :)) Если это php или javascript то я в них не алло к сожалению ((
0 PuPsAn

	03.11.2013 12:34 #10
ArhStrAngeR Разработка любых сайтов Регистрация: 08.06.2011 Сообщений: 3,375 Записей в дневнике: 1 Репутация: 2506	PuPsAn,тогда вам проще заказать это. Разработка сайтов любой сложности! Ультрабыстрые SSD VPS по смешным ценам(промокод VPS - дает скидку 25%)
0 ArhStrAngeR

Темы	Раздел	Ответов	Последний пост
Вопрос по h1-h6 и таблице стилей в wordpress	Вопросы от новичков	6	27.10.2013 22:09
Помощь по таблице на HTML	Web программирование	7	16.09.2013 14:29
Выделение [b][/b] как на Вебмастерс.	Web программирование	10	19.08.2012 15:29
Выделение внешних ссылок с помощью php-функции	Дайджест блогосферы	0	23.10.2010 17:12