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 :frowning:

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. :eek: Apologies lol.


<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.

Listen carefully: you just drained the bath, but do you hear that baby crying down the plughole? You threw him out too! :slight_smile:

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.

Thats why it has been so quiet!!! Thought i finally had some peace lol: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?

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

kk. Thank you kindly for your help ralph! :slight_smile:

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:


<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>

<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

<th scope="col">Role</th>

You can also use a <th> at the start of a row, such as

<th scope="row">Row heading</th>

though you don’t need that here.

Also if you have a heading row then it ought to be in the thead instead of the tbody.

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.

:rofl: :lol: :smiley:

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.



<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.

The most semantic way to mark-up the background information would probably be a definition list as shown below.



<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>