SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Table like organisation in html without <table>, <tbody>, <tr>, <td>, etc ?

    Hi guys,
    I was redesigning a website for a professor and in the biography page of their old website, screenshot here.

    But, I , personally, consider using tables for layout or at all anymore really is outdated. I know what I said above may be controversial, but I would sincerley appreciate it if someone could help me, if possible, to write the html and if necessary style it so that I can organise this data as if it was in a table without using the html table tags.

    I have been trying all day with div tags and other styling and I just can not get it

    Here is the html for the above table for the biography in the old site. btw, it contains massive amounts of inline styling that the previous web designer / coder used. Apologies lol.
    Code HTML4Strict:
    <table cellpadding="5" style="width: 531px;" class="normal">
            <tbody>
              <tr>
                <td colspan="3"><b>Professional Experience:</b></td>
              </tr>
              <tr>
                <td style="vertical-align: top; width: 80px;" top="">Technical
    Staff</td>
                <td style="vertical-align: top; width: 300px;">Bell
    Telephone Laboratories - Murray Hill</td>
                <td style="vertical-align: top;">1968 - 70</td>
              </tr>
              <tr>
                <td style="vertical-align: top; width: 80px;">Assistant
    Professor</td>
                <td style="vertical-align: top; width: 300px;">Michigan
    State University</td>
                <td style="vertical-align: top;">1970 - 76</td>
              </tr>
              <tr>
                <td style="vertical-align: top; width: 80px;">Visiting
    Associate
    Professor</td>
                <td style="vertical-align: top; width: 300px;">Institute
    of Physics - Bhubaneswar, India</td>
                <td style="vertical-align: top;">June - Sept. 1976</td>
              </tr>
              <tr>
                <td style="vertical-align: top; width: 80px;">Associate
    Professor</td>
                <td style="vertical-align: top; width: 300px;">Michigan
    State University</td>
                <td style="vertical-align: top;">1977 - 81</td>
              </tr>
              <tr>
                <td style="vertical-align: top; width: 80px;">Professor</td>
                <td style="vertical-align: top; width: 300px;">Michigan
    State University</td>
                <td style="vertical-align: top;">1982 - Present</td>
              </tr>
              <tr>
                <td style="vertical-align: top; width: 80px;">Visiting
    Professor</td>
                <td style="vertical-align: top; width: 300px;">Indian
    Institute of Science - Bangalore, India</td>
                <td style="vertical-align: top;">Sept. - Dec. 1979</td>
              </tr>
              <tr>
                <td style="vertical-align: top; width: 80px;">Visiting
    Professor</td>
                <td style="vertical-align: top; width: 300px;">Tata
    Institute of Fundamental Research - India</td>
                <td style="vertical-align: top;">Jan. - March 1980</td>
              </tr>
              <tr>
                <td style="vertical-align: top; width: 80px;">Visiting
    Professor</td>
                <td style="vertical-align: top; width: 300px;">University
    of Antwerp - Belgium</td>
                <td style="vertical-align: top;">March - June 1980</td>
              </tr>
              <tr>
                <td style="vertical-align: top; width: 80px;">Visiting
    Scientist</td>
                <td style="vertical-align: top; width: 300px;">Max-Planck-Institut
    f&uuml;r
    Festk&ouml;rperforschung, St&uuml;ttgart</td>
                <td style="vertical-align: top;">Summer 1980</td>
              </tr>
              <tr>
                <td style="vertical-align: top; width: 80px;">Visting
    Scientist</td>
                <td style="vertical-align: top; width: 300px;">Argonne
    National Laboratory</td>
                <td style="vertical-align: top;">Summer 1981</td>
              </tr>
              <tr>
                <td style="vertical-align: top; width: 80px;">Visiting
    Professor</td>
                <td style="vertical-align: top; width: 300px;">Jawarharlal
    Nehru University - Delhi, Indian
    Institute of Technology - Madras</td>
                <td style="vertical-align: top;">Jan. - April 1996</td>
              </tr>
            </tbody>
          </table>

    Thanks in Advance and please let me know if you have any Questions, Comments, or Concerns,

    Best Regards,
    Team 1504.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,105
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by team1504 View Post
    I , personally, consider using tables for layout or at all anymore really is outdated.
    Listen carefully: you just drained the bath, but do you hear that baby crying down the plughole? You threw him out too!

    Tables are still essential in HTML. It's just that they should only be used for tabular data, which is what you have here. So this is the right time to be using a table. It would be good to use a few <th>s etc, but apart from that, there's nothing wrong here.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Listen carefully: you just drained the bath, but do you hear that baby crying down the plughole? You threw him out too!
    Thats why it has been so quiet!!!!! Thought i finally had some peace lol

    So that explains why I couldn't figure out any other way or at least proper way to do it in HTML.
    So I;m probably going to just clean up the table code then, but
    do you or anyone have any ideas on how to create something like this.

    Because I wasn't getting anywhere close without some strange styles.

    <th>'s ? Where could / should they be put?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,105
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The first thing I'd recommend is remove all inline styles and other attributes etc. and build the basic table. Then look at styling it.

    Here is a handy reference that shows what the various parts of a table a for:

    TABLE - Table
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    kk. Thank you kindly for your help ralph!

  6. #6
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I saw one palce where putting a <th> helped, but no matter what I try. I guess thats kinda bold, what I have tried is not working to vertically align the university where he did his M.S. and the university where he did his PhD.

    I tried putting the bold tags around them. But what the <th> did for the content regarding his PhD is tab it so that PhD was inline with M.S. and not Education.
    The year he got his masters and the university he got it in have the proper spacing.
    But the year he got his PhD and the university he got it in do not.

    Here is a pic of what I have And I essentially am just aiming to vertically align the columns.
    Also, Here is the code I have thus far:
    Code HTML4Strict:
    <table>
            				<tbody>
              					<tr>
                					<td><strong>Background Information:</strong></td>
              					</tr>
              					<tr>
                					<td>Birthplace:</td>
                					<td>India, U.S. Citizen</td>
              					</tr>
              					<tr>
                					<td>Birthdate:</td>
                					<td>September 24, 1945</td>
              					</tr>
              					<tr>
                					<td>Education:</td>
                					<td>M.S.</td>
                					<td>1963</td>
                					<th>
                						<td>[B]University of Allhabad, India (University Gold Medalist)[/B]</td>
                					</th>
              					</tr>
              					<tr>
              						<th>
                						<td>Ph.D.</td>
                						<td>1968</td>
                						<td>[B]University of California, Riverside[/B]</td>
              						</th>
              					</tr>
            				</tbody>
          				</table>

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,105
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    <th> is meant to be used in place of a <td>, not as well as.

    Perhaps this table doesn't require them, although it might be worth having a heading at the top of each column indicating the purpose of the column, such as

    Code:
    <th scope="col">Role</th>
    You can also use a <th> at the start of a row, such as

    Code:
    <th scope="row">Row heading</th>
    though you don't need that here.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,785
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Also if you have a heading row then it ought to be in the thead instead of the tbody.
    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="^$">

  9. #9
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I don't think you should put _all_ your content in a table, just the parts that are tabular data. AFAIC, the education and the professional experience parts would be fine in (two different) tables. The rest doesn't really belong in a table.

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Listen carefully: you just drained the bath, but do you hear that baby crying down the plughole? You threw him out too!


    Tell that to the developers of vBulletin 4, PLEASE.

    OP's question is what I call the result "anti-table mafia" rhetoric that was so rampant five or six years ago, and STILL floats around out there for no good reason.

    If each row is related data, and each column all contains the same type of data... and you have headings for your columns -- that's tabular data... The entire reason tables EXIST.

    Your code IS outdated though -- even your second post's code is outdated. You see, we have these other tags called TH and CAPTION. You should really look at those.

    Also, since you don't really HAVE a THEAD, there's no reason to state TBODY... and of course all that inlined-style is just a disaster.

    [code]
    Code:
    <table>
    	<caption>Professional Experience:</caption>
    	<tr>
    		<th>Technical Staff</th>
    		<td class="where">Bell Telephone Laboratories - Murray Hill</td>
    		<td>1968 - 70</td>
    	</tr><tr>
    		<th>Assistant Professor</th>
    		<td class="where">Michigan State University</td>
    		<td>1970 - 76</td>
    etc, etc, etc...

    99% of the time people use a full width colspan and strong inside a table, they're doing it all wrong. The TH says what the row is about (you may want to add SCOPE), the class is there just to be able to tell the two TD apart in legacy browsers that don't know sibling selectors, first-child or nth-child...

    Though looking at what you're aiming for -- especially that most recent post where the number of TD/TH seems to vary from row to row... I'm starting to think this isn't tabular data as no relationships in terms of columns are maintained.

    that last post in particular is total gibberish -- you need to have the SAME number of columns inside EVERY TR -- and as pointed out TH is used INSTEAD of TD, not inside of or around.

  11. #11
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,136
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    The most semantic way to mark-up the background information would probably be a definition list as shown below.

    HTML Code:
    <hx>Background Information</hx> <!-- where x is the best suitable heading level relative to the ENIRE page -->
    <dl>
    	<dt>Birthplace</dt>
    	<dd>India, <abbr title="United States">U.S.</abbr> Citizen</dd>
    	<dt>Birthdate</dt>
    	<dd>September 24, 1945</dd>
    	<dt>Education</dt>
    	<dd><abbr title="Masters of Science">M.S.</abbr> 1963</dd>
    	<dd><abbr title="Doctor of Philosophy">PH.D.</abbr> 1968</dd>
    </dl>
    The only code I hate more than my own is everyone else's.


Tags for this Thread

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
  •