Как реализовать график средствами table?

Question

newdancer @newdancer

HTML

Как реализовать график средствами table?

Стоит задание составить расписание в виде html. Использовать можно только tr, td, rowspan, colspan. table должен быть только один
структура выглядит следующим образов

Вопрос задан более трёх лет назад
137 просмотров

Комментировать

Подписаться 2 Оценить Комментировать

Решения вопроса 1

7 комментариев

newdancer @newdancer Автор вопроса

это все я сделал. вопрос в другом. если я добавляю человека в таблицу. и он к примеру занимает время с 14:10 до 14:45 то как это сделать? объединять как то ячейки или расширять текущую?

Написано более трёх лет назад
Павел @Carduelis

newdancer: если с 14:10, то уже не выйдет. Если с 14:15, то сначала пишем функцию по подсчету номера ячейки относительно времени, для 14:15 это число равно 14*4+1 = 57.
Берем и считаем то же для конечного времени - 14:45, получаем 59.
Затем удаляем 58-ую ячейку, 59-ую ячейку, считаем количество удаленных ячеек и прибавляем к этому единицу, число записываем как rowspan к 57 ячейке. получится rowspan="3".
Почему добавляем единицу? Потому что у нас есть 3 ячейки, их надо объединить. Раз есть три, значит нужно написать это число в rowspan. Поэтому, прибавляем к кол-ву удаленных ячеек ту, которая не удалена.

Написано более трёх лет назад

newdancer @newdancer Автор вопроса

Павел: как посчитат я найду. но вот отображается криво. что не так:

<!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=utf-8">
  <title>Test</title>
 </head>
 <body>

   <table width="300" border="1" align="center" 
     cellpadding="0" cellspacing="0">
		<!-- time -->
    <tr> 
     <td rowspan="12" bgcolor="#FBF0DB" height="100" width="100">8:00</td>
     <td width="100"></td>
	 <td width="100"></td>
    </tr>
	    <tr>
     <td></td><td></td>
    </tr>
    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
		<!-- time -->
	    <tr> 
     <td rowspan="12" bgcolor="#FBF0DB" height="100" width="100">9:00</td>
     <td></td><td></td>
    </tr>
	    <tr>
     <td></td><td></td>
    </tr>
    <tr> 
     <td></td><td></td>
    </tr>
	    <tr>
     <td></td><td></td>
    </tr>
	    <tr> 
     <td bgcolor="#FF6A00" rowspan="5">Иванов Иван Иванович	</td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td bgcolor="#FF6A00" colspan="7">Петров Петр Петрович</td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
			<!-- time -->
	    <tr> 
     <td rowspan="12" bgcolor="#FBF0DB" height="100" width="100">10:00</td>
     <td></td><td></td>
    </tr>
	    <tr>
     <td></td><td></td>
    </tr>
    <tr> 
     <td></td><td></td>
    </tr>
	    <tr>
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
	    <tr> 
     <td></td><td></td>
    </tr>
   </table>

 </body>
</html>

Написано более трёх лет назад

Павел @Carduelis

newdancer: https://jsfiddle.net/ktd1Lbcm/ я же писал, что лишние ячейки нужно удалять. Или, хотя бы скрывать, как в примере по ссылке. Еще у вас ошибка во втором столбце для Петрова - там colspan вместо rowspan. В первом столбце скрываем 4 ячейки после той, у которой rowspan=5, во втором столбце скрываем 6 ячеек, у которой ~~colspan~~ rowspan=7. Осталось только высоту ячеек устаканить, если css не работает, можно попробовать воткнуть.

Написано более трёх лет назад
Павел @Carduelis

можно & nbsp; воткнуть.

Написано более трёх лет назад
newdancer @newdancer Автор вопроса

Павел: спасибо. скажите только вот возникла трудность даже с вашим примером. почему если поставить параметр border="0 " то все таблицы начинаю съезжаться. по поводу размеров стоит только огласка что каждый блок 1 часа должен быть 100х100 пикселей

Написано более трёх лет назад
Павел @Carduelis

newdancer: я думаю, стоит сначала почитать мануалы, хотя бы на htmlbook

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 21 час назад
- 130 просмотров
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- вчера
- 90 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 97 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 93 просмотра
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 73 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 61 просмотр
1

ответ
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 21 нояб.
- 35 просмотров
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- 21 нояб.
- 122 просмотра
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- 21 нояб.
- 59 просмотров
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Маркетплейс в МЕДИЦИНСКОЙ тематике

24 нояб. 2024, в 21:55

200000 руб./за проект

Нужно подобие hamster combat

24 нояб. 2024, в 21:41

1000 руб./за проект

Тестирование Desktop-приложение

24 нояб. 2024, в 21:19

35000 руб./за проект

Answer 1 · 2016-03-19 18:58:40

Находим минимальный вертикальный интервал, например, 15 минут
Создаем столько <tr>, сколько у нас этих интервалов, (24*(60/15))=96
Затем проставляем rowspan, удаляем лишние ячейки

Answer 2 · 2016-03-19 20:45:31

Можно задать для table, tr, td display:block
Для table position:relative
Для tr фикс высота, для неиспользуемых td display:none, для используемых position:absolute

Дальше свобода маневра безгранична

Как реализовать график средствами table?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт