Tworzenie tygodniowego rozkładu zajęć za pomocą CSS/HTML

Question

Próbuję stworzyć tygodniowy plan lekcji dla studia jogi. stworzyłem wersję statyczną za pomocą tabeli, które można zobaczyć na stronie:

http://www.studioleisure.com/classes.php

Uwaga: ^^ Ta strona zawiera teraz gotową wersję HTML, który został utworzony przy użyciu odpowiedzi na to pytanie.

Mam problem z zajęciami, które zaczynają się o 15 minut po godzinie lub trwają dłużej niż godzinę i tworzenie aplikacji dla tej wersji jest dość trudne.

Zastanawiam się, czy ktoś ma jakieś pomysły na stworzenie takiego, który miałby podobny wygląd, ale byłoby łatwiej kodować PHP.

Answer 1

Straciłbym stół i używałbym tylko kolumn. Następnie umieściłbym klasy w CSS (position:absolute) i obliczyłem wartość top na podstawie ich czasu rozpoczęcia i "wysokości" na podstawie ich długości. Poziome linie można uzyskać za pomocą powtarzającego się obrazu tła. Etykiety po lewej można umieścić w taki sam sposób, w jaki umieszczasz klasy.

HTML może wyglądać mniej więcej tak:

<ul> 
<!-- Monday: --> 
<li> 
    <strong>Monday</strong> 
    <ul class="classes"> 
    <li style="top:200px; height:100px;"> 
    <span>10:30 - 11:45</span> 
    Class title 
    </li> 
    <li> 
    <!-- More classes here... --> 
    </li> 
    </ul> 
</li> 
<li> 
    <!-- Other days here... --> 
</li> 
</ul> 
<ul class="labels"> 
<li style="top:180px">10:00</li> 
<!-- More labels here... --> 
</ul> 

Answer 2

Ładne oznaczenia. Ale masz rację - zrobienie tego z drobną ziarnistością spowoduje potworność tabeli (i towarzyszącego jej kodu do jej wygenerowania). Jest to wykonalne, ale jest łatwiejszy sposób, chociaż nie jest tak schludny:

Stwórz stół tak jak zwykle, ale niech będzie pusty. Ustaw jednak ustalone szerokości/wysokości dla każdego wiersza i kolumny. Następnie użyj pozycjonowania bezwzględnego do umieszczenia pozycji kalendarza na górze tabeli. Presto - wygląda tak samo, ale możesz umieścić wpisy z dokładnością co do minuty, jeśli chcesz.

Wadą tego jest to, że kopiuj-wklej nie będzie działać (bardzo dobrze) na tej bestii i nie mam pojęcia, co zrobi dla SEO i dostępności. Prawdopodobnie nic dobrego. Jeśli więc te dwie są dla Ciebie ważne, będziesz musiał zastosować rozwiązania tymczasowe (choć wydaje mi się, że są sposoby korzystania ze schematu i mają dobre SEO/dostępność).

Dodano: Aha, i właśnie zdałem sobie sprawę, że będziesz musiał również uważać na przepełnione teksty. Komórki tabeli rozwijałyby się automatycznie, ale bezwzględnie ustawione DIV nie będą.

Dodano 2: Hej, oto pomysł: użyj względnego pozycjonowania, aby nieco przesunąć wpisy. Zamiast pisać tekst bezpośrednio w komórkach, zapisz je wewnątrz SPANU, a następnie umieść je względnie w pozycji, aby przesuwał się na 15 minut. Znowu to wymaga stałych szerokości i wysokości komórek, a problem z przepełnieniem będzie problemem, ale SEO/dostępność nie zostanie zraniona, a kopiowanie i wklejanie będzie działało zgodnie z oczekiwaniami.

Answer 3

Poniżej znajduje się harmonogram Tygodnik szablon Stworzyłem.

https://github.com/NisalSP9/Weekly-time-schedule-template-jquery 

A to jest przykład tego.

https://codepen.io/nisalsp9/pen/QqqvwZ?editors=1111