ugrás a tartalomhoz

Fórumhozzászólás megjelenítése

Peete · 2012. Dec. 8. (Szo), 13.51
Üdv!

A fenti témával kapcsolatban lenne egy leginkább elméleti kérdésem:

Egy teljesen átlagos fórumról beszélünk, adatbázisból kiolvasunk fordított sorrendben n darab rekordot, stb, stb, adott a
$comment['name']
$comment['date']
$comment['comment']
jellegű adathalmaz.

Ha az a feladat, hogy a kb. legmegszokottabb módon megjelenítsük a kommenteket:
********************************
*Név_________*___________Dátum *
********************************
* Lorem ipsum dolor sit amet_______*
* consectetur adipisicing___________*
* sed do eiusmod tempor___________*
********************************
tehát fent, egy sorban balra zárt név, jobbra zárt dátum, alatta, teljes szélességben a hozzászólás, biztos mindenki látott már ilyet (nem reklám gondolom, ha az index.hu fórumát megemlítem példaként.)

Nos, ezt akár honnan nézem, úgy néz ki, mint egy táblázat, és valóban a legkézenfekvőbb, ha:
  1. <table>  
  2.     <tr>  
  3.         <td>Név</td>  
  4.         <td>Dátum</td>  
  5.     </tr>  
  6.     <tr>  
  7.         <td colspan="2">Hozzászólás</td>  
  8.     </tr>  
  9. </table>  
viszont: a html+css alapú oldalak szabványosodásakor az lett "beleverve a fejembe", hogy table tagot nem használunk másra, mint valóban táblázatos adatok táblázatban történő megjelenítésére.
És itt elbizonytalanodtam, hogy az adott feladat adatai valóban táblázatnak számítanak-e? [bár nézőpont kérdése, hogy minek számítanak]

Szóval a kérdésem:

Ti hogyan csináltok/csinálnátok meg egy ilyet?


Alternatívaként én arra jutottam, hogy:
  1. <div id="comment">  
  2.   
  3.     <div id="date">Dátum</div>  
  4.       
  5.     <p class="name">Név</p>  
  6.     <p class="comment">Lorem ipsum dolor sit amet, </p>  
  7.   
  8. </div>  
  1. #date {  
  2. /*stbstb*/  
  3. floatright;  
  4. }  
 
1

Ez nem táblázat. A

Joó Ádám · 2012. Dec. 8. (Szo), 15.01
Ez nem táblázat. A táblázatnak fejléce és ahhoz igazodó sorai vannak. A hozzászólások jelölésére a HTML5 előtt nincs különösebben kézenfekvő elem, a legtöbb, amit tehetsz, hogy a nevet és a keltezést címként jelölöd (egy áttekintő oldalon ezeket jelenítenéd meg), természetesen tetszés szerint, akár a fent leírt módon formázva. A hozzászólás egészét egy div-be teheted.

HTML5-ben a hozzászólást article veheti körül, és egy header-be teheted a szerzőt és a keltezést. Utóbbihoz használhatod a time-ot.
2

hatom

Poetro · 2012. Dec. 8. (Szo), 16.41
  1. <div class="hfeed">  
  2.     <div class="hentry" id="comment-1001">  
  3.         <a href="#comment-1001" class="entry-title" rel="bookmark">comment-1</a>  
  4.         <abbr title="2012-12-01T01:01:00+02:00" class="published">2012-12-01 01:01:00</abbr>  
  5.         <address class="vcard author"><span class="fn">Felhasznalo 1</span></address>  
  6.         <div class="entry-content">Comment 1... Comment 1...</div>  
  7.     </div>  
  8.     <div class="hentry" id="comment-1002">  
  9.         <a href="#comment-1002" class="entry-title" rel="bookmark">comment-2</a>  
  10.         <abbr title="2012-12-02T02:02:00+02:00" class="published">2012-12-02 02:02:00</abbr>  
  11.         <address class="vcard author"><span class="fn">Felhasznalo 2</span></address>  
  12.         <div class="entry-content">Comment 2... Comment 2...</div>  
  13.     </div>  
  14.     <div class="hentry" id="comment-1003">  
  15.         <a href="#comment-1003" class="entry-title" rel="bookmark">comment-3</a>  
  16.         <abbr title="2012-12-03T03:03:00+02:00" class="published">2012-12-03 03:03:00</abbr>  
  17.         <address class="vcard author"><span class="fn">Felhasznalo 3</span></address>  
  18.         <div class="entry-content">Comment 3... Comment 3...</div>  
  19.     </div>  
  20.     <div class="hentry" id="comment-1004">  
  21.         <a href="#comment-1004" class="entry-title" rel="bookmark">comment-4</a>  
  22.         <abbr title="2012-12-04T04:04:00+02:00" class="published">2012-12-04 04:04:00</abbr>  
  23.         <address class="vcard author"><span class="fn">Felhasznalo 4</span></address>  
  24.         <div class="entry-content">Comment 4... Comment 4...</div>  
  25.     </div>  
  26. </div>