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

Question

newdancer @newdancer

HTML

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

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

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

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

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

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик + ИИ

9 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

Решения вопроса 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

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

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

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

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

HTML

+2 ещё

Простой
Как запретить формирования ссылок вида /tel:?
- 2 подписчика
- 01 июл.
- 292 просмотра
3

ответа
HTML

+1 ещё

Средний
Как выставить элементу ширину по содержимому при переносах?
- 1 подписчик
- 30 июн.
- 166 просмотров
1

ответ
HTML

+3 ещё

Средний
Как создать каркас верстки который будет считаться по высоте, а не по ширине?
- 4 подписчика
- 26 июн.
- 382 просмотра
4

ответа
JavaScript

+2 ещё

Простой
Не работает тень + слайдер, есть варианты?
- 2 подписчика
- 21 июн.
- 200 просмотров
1

ответ
HTML

+1 ещё

Простой
Как оформить так карточку типа бенто стиль?
- 1 подписчик
- 13 июн.
- 239 просмотров
3

ответа
HTML

+2 ещё

Простой
Как блок уведомлений поднять выше dialog?
- 2 подписчика
- 21 мая
- 196 просмотров
2

ответа
HTML

+1 ещё

Простой
Как свг заменить на фон?
- 1 подписчик
- 08 мая
- 299 просмотров
1

ответ
HTML

+1 ещё

Простой
Чем препроцессить в HTML сокращения?
- 2 подписчика
- 04 мая
- 354 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 2 подписчика
- 01 мая
- 391 просмотр
2

ответа
JavaScript

+1 ещё

Простой
Как обновлять данные массива, чтобы по нажатию на кнопку на странице добавлялся еще один элемент массива?
- 3 подписчика
- 12 апр.
- 771 просмотр
4

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

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?

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

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

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