SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,530
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    THEAD, TBODY, TFOOT ??

    What is the purpose of THEAD, TBODY, and TFOOT and do I really need them?

    I am building an "Inbox" for Private Messages, and have decided that the tabular nature of the data warrants the use of an HTML Table. However, I am admittedly rusty on Tables, mainly because ever since starting to learn CSS I have basically heard that "Tables are evil!"

    Here is what I have so far...
    HTML Code:
    	<table border="1"  cellspacing="1">
    		<thead>
    		</thead>
    		<tbody>
    			<tr>
    				<th width="50">Check</th>
    				<th width="50">Flag</th>
    				<th width="150">From</th>
    				<th width="400">Subject</th>
    				<th width="150">Date</th>
    			</tr>
    			<tr>
    				<td>__</td>
    				<td>__</td>
    				<td>JohnDoe</td>
    				<td>Re: Surprise Party this Saturday...</td>
    				<td>2012-05-17 3:15pm</td>
    			</tr>
    			<tr>
    				<td>__</td>
    				<td>__</td>
    				<td>JaneDoe</td>
    				<td>Re: Surprise Party this Saturday...</td>
    				<td>2012-05-17 4:07pm</td>
    			</tr>
    		</tbody>
    	</table>
    Feel free to share how I can improve the above "Inbox"...

    Thanks,


    Debbie

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    There are some bloated deprecated attributes like 'width' (presentational) in that TABLE that are basically redundant. That THEAD is 'empty' in that example, which obviously is illegal, which I suspected you, meant to have those TH contained as the sub-element (of the THEAD).

    The THEAD element defines a group of header rows in a table. The TFOOT is optional and defines a group of footer rows in a table. The TFOOT must follow the optional THEAD and precede the required TBODY. The TFOOT must appear before TBODY within a TABLE. Personally for that table I'd probably just stick with TH, I doubt you'd need a footer, well you don't have one at the moment as it so happens.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Those table elements are basically entered by the browser if you don't do it yourself, but it's better to put them in yourself to make the table complete.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Just about any table will have a heading row so you need a <thead> to contain it - that way when the table prints over multiple pages the headings should display at the top of each page (assuming the browser actually works properly).

    The actual content of the table goes in a <tbody> tag. In some situations you might want to break the content up into sections and so would then use multiple <tbody> tags.

    The <tfoot> is only needed if you actually have footer rows for the table - it must come directly after the thead and before the tbody because if the table is printed there could be a page break in the middle of the table and the footer would need to be displayed at the bottom of each page (again assuming that the browser actually works properly in handling tables).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •