Tabela css div

[james.bien]

Witajcie!
Prowadząc stronę na Joomla1.5 miałem w kilku artykułach dane, które najlepiej prezentowały się w postaci tabeli. Wykorzystywałem możliwości edytora JCE i wyglądało to dobrze, było wystarczające.
Aktualnie w najnowszej Joomla w szablonie Protostar też za pomocą JCE próbuję zapisać dane w postaci tabeli, ale robiąc wszystko tak samo jak w Joomla1.5 nie wygląda to tak jak bym chciał.
Trafiłem kiedyś na informację (nie pamiętam, czy z tego forum, ale chyba tak), że aktualnie nie powinno się tworzyć tabel w ten sposób, a z wykorzystaniem css.
Mam prośbę do Koleżanek, Kolegów Forumowiczów o wskazówki. Temat trochę dla mnie nowy i byłbym wdzięczny za podpowiedzi, instrukcje, może jakiś prosty przykład kodu. Coś, od czego mógłbym zacząć.

Z góry dziękuję i pozdrawiam
JB

[zwiastun]

Trafiłem kiedyś na informację (nie pamiętam, czy z tego forum, ale chyba tak), że aktualnie nie powinno się tworzyć tabel w ten sposób, a z wykorzystaniem css.

W HTML5 usunięto atrybuty formatujące wygląd tabeli. W tej mierze nastąpiła zmiana (ale stare atrybuty wciąż są interpretowane). Trudno coś doradzić, nie wiedząc, o co Ci dokładnie chodzi.

[jaceko007]

Przede wszystkim, nie powinieneś ustawiać wielkości tabeli ze względu na to, że sztywny gabaryt "wylezie" w przeglądarce smartfona poza ekran.
W Protostarze możesz skorzystać z predefiniowanych klas Bootstrapa. Nadaj np. tabeli klasę "table", "table-hover" i oczywiście szerokość np span6.

[james.bien]

Trudno coś doradzić, nie wiedząc, o co Ci dokładnie chodzi.
Wydaje mi się, że chyba trzeba "uciekać" z tworzenia tabel za pomocą wbudowanego w edytor narzędzia do ich tworzenia. Między innymi dlatego, o czym pisał jacek007, czyli kiepskim wyglądzie a w zasadzie niewyglądzie tabel w smartfonie, tablecie. Chciałbym więc nauczyć się stosować innej metody tworzenia tabel.



W Protostarze możesz skorzystać z predefiniowanych klas Bootstrapa. Nadaj np. tabeli klasę "table", "table-hover" i oczywiście szerokość np span6.
Znalazłem na szybko link (https://kursbootstrap.pl/tabele/). Nie przeglądałem tego jeszcze, ale to chyba coś o czym pisze jacek007. Ponieważ stykam się z tym pierwszy raz, nie wiem jak się zabrać do tego. Nie wiem też, czy to, co jest na tej stronie wystarczy. Stąd moja prośba o wskazówki do moich "lekcji".

Jak rozumiem, podane pod linkiem przykłady po odpowiedniej modyfikacji do swoich potrzeb, wklejam jako kod do artykułu i będę miał tabelę.

Dzięki Kolegom za pierwsze wskazówki, byłbym wdzięczny za następne:up:.

Pozdrawiam
JB

[zwiastun]

Nie rozumiem, dlaczego trzeba "uciekać od tworzenia tabel za pomocą wbudowanego w edytor narzędzia do ich tworzenia.
http://dostepny.joomla.pl/warsztat/dobre-praktyki/tworzenie-dostepnej-zawartosci/30-dostepne-tabele
A to, czy można zastosować w Twojej witrynie formatowanie oparte na platformie Bootstrap zależy od tego, czy masz szablon oparty na tej platformie.

[dawidryba11]

A w jaki sposob chcesz wypisac pewne informacje? Tabela jest do tego najlepsza.

Napisalem sobie skrypt w jQuery, ktory sprawdza czy mobile. Jesli tak to wycina ja i wstawia do modala. A zamiast niej daje button, ktory po nacisnieciu otwiera tabele, w ktorej mozna sie poruszac gora-dol-prawo-lewo i problemu nie ma baaa.. nawet ladnie to wyglada.

Wysłane z mojego E2105 przy użyciu Tapatalka

[Jac]

Co ma wygląd tabeli do tabletu? Jak sobie ostylujesz wygląd tabeli w arkuszu CSS, tak będzie wyglądała, bez znaczenia, czy na dużym czy małym ekranie.

Tutaj coś gotowego do wyświetlania tabel na małych ekranach:

https://extensions.joomla.org/extensions/extension/mobile/mobile-display/responsive-scrolling-tables/
https://extensions.joomla.org/extensions/extension/news-display/tables-a-lists/responsive-tables/
https://extensions.joomla.org/extensions/extension/edition/editor-buttons/responsive-tables-editor/

Oczywiście są lepsze rozwiązania, ale nie wystarczy tylko ich zainstalowanie, jak tych powyżej.

[jex]

Ja odradzałbym stosowanie tabel. Bootstrap (i nie tylko) daje takie możliwości formatowania, że lepiej w tabele się nie plątać. Średnio radzą sobie z responsywnością.

[zwiastun]

Ja odradzałbym stosowanie tabel.
Bo? Masz jakąś alternatywę dla prezentacji danych tabelarycznych?
Pomijam, że Bootstrap oferuje także podstawowe rozwiązanie problemu dostosowania tabel do urządzeń mobilnych.

[james.bien]

Witajcie!


Nie rozumiem, dlaczego trzeba "uciekać od tworzenia tabel za pomocą wbudowanego w edytor narzędzia do ich tworzenia.
http://dostepny.joomla.pl/warsztat/d...ostepne-tabele

Szukam po prostu rozwiązania dla banalnej wydaje się sytuacji. Robię ćwiczeniową tabelę w edytorze TinyMCE wg instrukcji z podanego linku. Wydaje się, że tabela wygląda tak, jak powinna. Po przełączeniu na edytor JCE, wygląd tabeli zmienia się. Inaczej wygląda w edytorze, inaczej w podglądzie. Brak odstępu między komórkami. W załączniku zamieszczam zrzut: u góry JCE, w środku kod, poniżej TinyMCE.
W czym tkwi problem?


A to, czy można zastosować w Twojej witrynie formatowanie oparte na platformie Bootstrap zależy od tego, czy masz szablon oparty na tej platformie.
W opisie szablonu Protostar "...oparty na szkielecie projektowym Bootstrap oraz bibliotece Joomla User Interface (JUI)".

Dzięki za dotychczasowe wskazówki, ale może podsuniecie jeszcze jakiś pomysł.
Pozdrawiam
JB
9076

[jaceko007]

Dobrze rozumiem, że chcesz, aby tabela miała białe odstępy między komórkami? Może biała ramka?

[james.bien]

Dobrze rozumiem, że chcesz, aby tabela miała białe odstępy między komórkami? Może biała ramka?
Na obecną chwilę taki odstęp w tabeli jest mi właśnie potrzebny. I jak pisałem w poprzednim swoim poście nijak to wychodzi.

[adam.lachut]

Być może styl tabeli jest nadpisywany/modyfikowany w innym miejscu, podanie adresu strony mogłoby pomóc.

Spróbowałbym jeszcze zamiast cellspacing do <table style="..."> dodać border-collapse: separate; border-spacing: 5px;
a zamiast cellpadding użyć: w <td> padding: 3px;

jeśli zadziała to dopisz jakąś klasę w arkuszu stylów

[zwiastun]

W ogóle najpierw należałoby wyrzucić z kodu tabeli to przestarzałe formatowanie. Jeśli już stosować style wpisane, to tak, jak doradza powyżej @adam.lachut, czyli:


<table style="border-collapse: separate, border-spacing:5px">
//a w komórkach td
<td style="padding:3px">

Jeśli szablon jest oparty na Bootstrapie, można spróbować np.


<table class="table table-stripped table-bordered table-hover table-condensed">

[james.bien]

Jeśli szablon jest oparty na Bootstrapie, można spróbować np.
Kod HTML:

<table class="table table-stripped table-bordered table-hover table-condensed">

Bingo!!!
Na szybko sprawdziłem i zaczyna wyglądać tak, jak należy. Mam nadzieję, że formatowanie tabeli będzie przebiegać dalej bez problemów.

Panowie! Wielkie dzięki za pomoc!!!
Pozdrawiam
JB