Witam Was Serdecznie, (post z 09.07.2013)

spotkałem się wielokrotnie z problemami tabel w WebSiteX5 w opisach polskich i zagranicznych.
Liczba wierszy jak i kolumn w tabeli nie stanowi ograniczeń dla WebsiteX5 jakby mogło się wydawać. To tylko pozory, a rozwiązań jest wiele. Przykład wykonany w wersji v9. Evolution.

Możliwe że gdy korzystamy z wbudowanego kreatora Tabel mogą wystąpić małe ograniczenia funkcjonalności (64 wiersze, 12 kolumn), ale nie możemy jednoznacznie stwierdzić, że tego problemu nie można obejść, bo jest to Błędne Stwierdzenie i wprowadzanie użytkowników w błąd.

Co możemy zrobić ?

Możemy skorzystać z wbudowanego Gadżetu HTML, który ułatwi nam stworzenie tabeli w kodzie HTML5 do naszej podstrony. A więc zabieramy się do pracy, oto przykładowy prosty kod:

<table>
      <tr> <!-- Wiwersze: 1-10 -->
          <td>1 wiersz,1 komórka</td> <!--Kolumna-->
          <td>2 cells</td>
          <td>3 cells</td>
          <td>4 cells</td>
          <td>5 cells</td>
          <td>6 cells</td>
          <td>7 cells</td>
          <td>8 cells</td>
          <td>9 cells</td>
          <td>10 cells</td>
          <td>11 cells</td>
          <td>12 cells</td>
          <td>13 cells</td>
          <td>14 cells</td>
      </tr>
      <tr>
          <td>2 wiersz</td>
          <td>Kolumna</td>
          <td>..</td>
          <td>..</td>
          <td>..</td>
          <td>..</td>
          <td>..</td>
          <td>..</td>
          <td>..</td>
          <td>..</td>
          <td>..</td>
          <td>..</td>
          <td>..</td>
          <td>..</td>
      </tr> <!-- Koniec Wiwerszy: np 1-10 -->

   [  <tr>
          <td>n-wiersz</td>
          <td>..</td>
          <td>itd..</td>
     </tr>  ] ...itd

</table>

W przypadku kiedy nasza tabela będzie miała dużo informacji, należy się zastanowić czy takie rozwiązanie ma sen i nie zepsuje układu i wyglądu naszej podstrony. Czasem lepiej jest dorzucić kilka podstron i podzielić tabelkę na mniejsze części rozdzielając ją. Wówczas uzyskujemy lepszy wygląd, przejrzystość i funkcjonalność.

Dla większych opracowań, można zbudować rozbudowaną tabelkę w oddzielnym pliku HTML5 wraz z CSS i podpiąć ja do projektu w jakimś oddzielnym folderze i dodając odnośnik poprzez link.

Jeśli natomiast mamy mieć tylko tabelkę informacyjną, bez dodatkowych funkcji interaktywnych możemy wówczas taką tabelkę przygotować jako plik PDF w którym zawarta będzie i grafika oraz odnośniki do naszej strony lub podstron, plik Word, plik PowerPoint lub zwykły plik graficzny *.jpg lub *.png.

Rozwiązań jest wiele w zależności od przeznaczenia, zastosowania, funkcjonalności i samej estetyki. Kreatywność dla Was tutaj stoi otworem i nie ma żadnych ograniczeń twórczych - życzę Wam pomyślnych i kreatywnych pomysłów i rozwiązań.

Wyjaśnienie znaczników, mały słowniczek pojęć:

<tabel> </table> - określa ogólne ramy naszej tabeli, wyznacza-określa jej pole.

<tr> </tr> - wstawia wiersze tabeli

<td> </td> - wewnątrz każdego wiersza tworzymy komórki, znacznik <td> tworzy takie komórki, możemy korzystać z innego znacznika <th></th> i jego działanie jest takie same jak <td></td>, lecz jego funkcjonalność jest powiększona i stosowany jest wówczas gdy w przyszłości zaszłaby potrzeba upiększenia tabeli przy pomocy CSS, kaskadowych arkuszy stylów.

A więc...Powracamy do naszej Tabeli, a więc możemy kopiować powyższy człon w znacznikach <tr><td>n-wiersz</td></tr> aż do momentu osiągnięcia np. 70,120 wierszy.

Przykład zamieściłem w pliku graficznym.

Aby nasza tabelka wyglądała i przypominała wizualnie TABELKĘ musimy dorzucić na końcu kod CSS.

Jak to robimy ?

Gdy mamy uruchomiony WebsiteX5, pozycja kroku 2-planowanie witryny. W mapie strony mamy układ stron naszej witryny wraz z podstronami. Ja dla przykładu wrzuciłem tą przykładową Tabelkę na stronie głównej witryny. Uruchamiamy ją klikając 2x w stronę główną, i wchodzimy do panelu Tworzenia Strony. Wówczas na liście kroków głównego menu, uzyskamy pozycję: 3-Tworzenie stron.

Przeciągamy z prawego bocznego panelu "dostępne obiekty" na nasz układ strony ikonkę "HTML i gadżety". Możemy dodać więcej wierszy i kolumn na naszej podstronie, wówczas ikonkę "HTML gadżety" będziemy musieli sobie dopasować (rozciągnąć na szerokość i wysokość) do układu strony wg własnego uznania.

Klikamy 2x na naszą ikonkę "HTML gadżety" i przechodzimy do jej edycji. Wpisujemy w niej powyższy kod HTML cały <table> ...kod </table> z powyższego przykładu.

W prawej dolnej części tego okna znajduje się pozycja Właściwości.  Ustaw wysokość przykładową na 568 px oraz zaznacz pozycję Pokaż paski przewijania.

Następnie klikamy na zakładce "Zaawansowane", i w niej wpisujemy przykładowy prosty kod CSS:

table, td
{
 border: solid 1px black;
}

td
{
 width: 80px;
 height: 80px;
}

Bardziej profesjonalnym rozwiązaniem jest stworzenie oddzielnego pliku np. tabela1.css i dołączyć go do projektu w pozycji dolnej "Pliki związane z kodem HTML" klikając na przycisk z prawej strony "Dodaj". Jest to najlepszy i preferowany sposób, gdyż w łatwy sposób możemy zmienić nasz styl CSS tabelki, zapisać zmiany w pliku i przesłać na serwer. Eliminujemy przez to ingerencję w kod HTML w przypadku zagnieżdżonego stylu wewnątrz. Dodatkowo możemy dołączyć pliki JavaScript lub jQuery wzbogacając nasz projekt.

Należy pamiętać, że mając oddzielny plik stylów Tabelki, do naszej podstrony (u mnie strony głównej) trzeba podać ścieżkę, link do naszego stylu kaskadowego tabela1.css.

<link rel="stylesheet" type="text/css" href="<b>style/tabela1.css</b>" media="screen,print" />

Jak to robimy? Cofamy się do pozycji w kroku 2-planowanie witryny. Klikamy 1x podświetlając na mapie witryny naszą podstronę (u mnie Strona główna). U góry strony mamy ikonki menu, klikamy na ostatnią z prawej strony "Właściwości strony/poziomu". Ukazuje się nam dodatkowe okienko, wybieramy zakładkę "Zaawansowane". Z pozycji u dołu "Kod niestandardowy" z rozwijalnej listy wybieramy pozycję "Przed tagiem </HEAD>". Wewnątrz okienka tekstowego wpisujemy:

<link rel="stylesheet" type="text/css" href="<b>nasz folder/tabela1.css</b>" media="screen,print" /> , "nasz folder/tabela1.css" - to ścieżka do naszego pliku na serwerze ze stylem kaskadowym tabelki.

Mam nadzieję, że ten krótki tutorial będzie pomocny w rozwijaniu dalszych nowych projektów, czego Wam i sobie życzę.

Best wishes and regards

Adam-AIGM:)