Simple table with 2 columns broken up with header span.

Rowby Goren
Rowby Goren used Ask the Experts™
on
Hello

I think I need an old fashioned table to do this.  It's for a website that is NOT responsive.  They need a very structured two column list of  faculty members.  All lined up right and left as in the attached pdf.

So basically it look as if it will be a table (not div) that has two columns -- but broken with headers that span both columns.

I don't want to get complicated with this and use any css tricks  to create the two colums or fancy html.  I think a table will do it. But am looking for your advice and suggestions.  I WILL need css to style the text and headers, though...

Thanks for your help, suggestions and solution.

Rowby
School-EE-a.pdf
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Hey Rowby,

If you really just want a simple table, then something lke this would probably work for you

<table>
    <tr><th colspan="2">This is a header</th></tr>
    <tr>
        <td>Column 1 Content</td>
        <td>Column 2 Content</td>
    </tr>
    <tr>
        <td>Column 1 Content</td>
        <td>Column 2 Content</td>
    </tr>
</table>

Open in new window


And some basic styling:

table { width: 100%; }
th { font-weight:bold; text-align:center; }
td { width: 50%; }

Open in new window

David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
That is definitely not tabular data. That looks much more like a series of 2 column lists with a heading (e.g. <h2> or <h3>) for each. This way has the added benefit of being responsive, even if it's not currently a project requirement.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
ul.twoCols {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
	max-width: 60em; /* optional */
}
ul.twoCols>li {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 2em 0 0;
	margin: 0 -.5em 2em 0;
	/* the negative right margin is a quick way to deal with the word spacing issue */
	width: 50%;
	min-width: 18em;
	display: inline-block;
	vertical-align: top;
}

</style>
</head>
<body>


<h1>World Arts and Cultures/Dance</h1>

<h2>Faculty Administration</h2>

<ul class="twoCols">
	<li>
John Doe<br>
Chair<br>
Office: xxxx<br>
Tel: 310.80000<br>
Email: Whatever at whatever
	</li>
	<li>
Jane Smih<br>
Vice Chair, Graduate Affairs<br>
Office: XXX<br>
Tel: 310.3333333<br>
Email: whatever@whatever
	</li>

</ul> <!-- /.twoCols -->



<h2>Student Office</h2>

<ul class="twoCols">
	<li>
Mary Smith<br>
eAdvisor<br>
Office: x1233<br>
Tel: 310.333333<br>
Email: whatever@whtever
	</li>
	<li>
Jim Jones<br>
Advisor<br>
Office: xxx<br>
Tel: 310.333333<br>
Email: whatever@whateer
	</li>

</ul> <!-- /.twoCols -->

<h2>Staff</h2>

<ul class="twoCols">
	<li>
Larry Smith<br>
General Manager<br>
Office:jkljlklkjkj<br>
Los Angeles, CA<br>
900000<br>
Tel: 310.333-3333<br>
Email: whaever@whatever
	</li>
	<li>
Sue Sue<br>
Personnel<br>
Office: 1111<br>
Tel: 310.333-3333<br>
Email: whatever@whatever
	</li>
	<li>
John Doe<br>
Coordinator<br>
Office: ssk;s;s<br>
Tel: 310.333-3333<br>
Email: whaever@whatever
	</li>
	<li>
Jane Doe<br>
Analyst<br>
Office: ssk;s;s<br>
Tel: 310.333-3333<br>
Email: whatever@whatever
	</li>
	<li>
Jane Doe<br>
Manager<br>
Office: ssk;s;s<br>
Tel: 310.333-3333<br>
Email: whatever@whatever
	</li>
	<li>
Jane Doe<br>
Technical<br>
Office: ssk;s;s<br>
Tel: 310.333-3333<br>
whaever@whatever
	</li>
	<li>
John Doe<br>
Sound Engineer<br>
Office: ddddd<br>
Tel: 310.3333333<br>
Email: ssss@asssdds3
	</li>

</ul> <!-- /.twoCols -->

<h2>Art Global Health Center</h2>

<ul class="twoCols">
	<li>
John Doe<br>
Director<br>
Office: DDD<br>
Tel: 310.3333333<br>
Email: whatever@whatever
	</li>
	<li>
John Doe<br>
Director of Community<br>
Office: sdsd<br>
Tel: 310.3333333<br>
Email: whatever@whatever
	</li>
	<li>
John Doe<br>
Fund Manager<br>
Office: sdsd<br>
Tel: 310.3333333<br>
Email: whatever@whatever
	</li>
	<li>
John Doe<br>
Assistant Director<br>
Office: sdsd<br>
Tel: 310.3333333<br>
Email: whatever@whatever
 	</li>
	<li>
John Doe<br>
Adminstrative Cordinator<br>
Office: sd sd<br>
Tel: 310.3333333<br>
Email: whatever@whaever
	</li>
	<li>
John Doe<br>
Special Advisor<br>
Office: sdsd<br>
Tel: 310.3333333<br>
Email: whatever@whaever
	</li>

</ul> <!-- /.twoCols -->

</body>
</html>

Open in new window

Author

Commented:
Looks good I'm checking it out.  Thanks Chris!!!
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Um... Someone else had a solution that I missed -- a responsive solution -- My client said they don't want it rewsponsive, but maybe when they see the non-responsive version they might change their mind.

However I clicked on something here to "Collapse" that suggestion.  And I don't now how to restore the suggestion.  This is a new "feature" on EE -- I assume.  Perhaps it will reappear????

IN other words, I did not mean to "collapse" anyone's suggestion...  Perhaps the moderator can "bring it bacik:????

Rowby
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
@Rowby - not sure what you've done to collapse it, but I think that's going to be something that's stored in your own Browser (session / cookie etc), so it's unlikely a moderator can bring it back. I can't see how to collapse a comment, so I can't offer any advice on how to uncollapse it. If you don't get any joy, then maybe David can re-post it. I don't want to re-post it for him because if it's a solution you accept, the point would go to me and not him !!

Having said that, it wasn't a responsive solution 'out-of-box'. It offered an alterantive HTML markup that could be made responsive with the correct CSS (relative measurements and media queries). The basics of it were to wrap each element in an LI instead of a table cell, and add CSS to set up the columns
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
Having said that, it wasn't a responsive solution 'out-of-box'. It offered an alterantive HTML markup that could be made responsive with the correct CSS (relative measurements and media queries).
Media queries aren't always required to make a layout responsive. In this case it's simple enough to apply a min-width to each list-item, so that they form a single column when the viewport isn't wide enough for 2 columns.

Here's what I posted above:
That is definitely not tabular data. That looks much more like a series of 2 column lists with a heading (e.g. <h2> or <h3>) for each. This way has the added benefit of being responsive, even if it's not currently a project requirement.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
ul.twoCols {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
	max-width: 60em; /* optional */
}
ul.twoCols>li {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 2em 0 0;
	margin: 0 -.5em 2em 0;
	/* the negative right margin is a quick way to deal with the word spacing issue */
	width: 50%;
	min-width: 18em;
	display: inline-block;
	vertical-align: top;
}

</style>
</head>
<body>


<h1>World Arts and Cultures/Dance</h1>

<h2>Faculty Administration</h2>

<ul class="twoCols">
	<li>
John Doe<br>
Chair<br>
Office: xxxx<br>
Tel: 310.80000<br>
Email: Whatever at whatever
	</li>
	<li>
Jane Smih<br>
Vice Chair, Graduate Affairs<br>
Office: XXX<br>
Tel: 310.3333333<br>
Email: whatever@whatever
	</li>

</ul> <!-- /.twoCols -->



<h2>Student Office</h2>

<ul class="twoCols">
	<li>
Mary Smith<br>
eAdvisor<br>
Office: x1233<br>
Tel: 310.333333<br>
Email: whatever@whtever
	</li>
	<li>
Jim Jones<br>
Advisor<br>
Office: xxx<br>
Tel: 310.333333<br>
Email: whatever@whateer
	</li>

</ul> <!-- /.twoCols -->

<h2>Staff</h2>

<ul class="twoCols">
	<li>
Larry Smith<br>
General Manager<br>
Office:jkljlklkjkj<br>
Los Angeles, CA<br>
900000<br>
Tel: 310.333-3333<br>
Email: whaever@whatever
	</li>
	<li>
Sue Sue<br>
Personnel<br>
Office: 1111<br>
Tel: 310.333-3333<br>
Email: whatever@whatever
	</li>
	<li>
John Doe<br>
Coordinator<br>
Office: ssk;s;s<br>
Tel: 310.333-3333<br>
Email: whaever@whatever
	</li>
	<li>
Jane Doe<br>
Analyst<br>
Office: ssk;s;s<br>
Tel: 310.333-3333<br>
Email: whatever@whatever
	</li>
	<li>
Jane Doe<br>
Manager<br>
Office: ssk;s;s<br>
Tel: 310.333-3333<br>
Email: whatever@whatever
	</li>
	<li>
Jane Doe<br>
Technical<br>
Office: ssk;s;s<br>
Tel: 310.333-3333<br>
whaever@whatever
	</li>
	<li>
John Doe<br>
Sound Engineer<br>
Office: ddddd<br>
Tel: 310.3333333<br>
Email: ssss@asssdds3
	</li>

</ul> <!-- /.twoCols -->

<h2>Art Global Health Center</h2>

<ul class="twoCols">
	<li>
John Doe<br>
Director<br>
Office: DDD<br>
Tel: 310.3333333<br>
Email: whatever@whatever
	</li>
	<li>
John Doe<br>
Director of Community<br>
Office: sdsd<br>
Tel: 310.3333333<br>
Email: whatever@whatever
	</li>
	<li>
John Doe<br>
Fund Manager<br>
Office: sdsd<br>
Tel: 310.3333333<br>
Email: whatever@whatever
	</li>
	<li>
John Doe<br>
Assistant Director<br>
Office: sdsd<br>
Tel: 310.3333333<br>
Email: whatever@whatever
 	</li>
	<li>
John Doe<br>
Adminstrative Cordinator<br>
Office: sd sd<br>
Tel: 310.3333333<br>
Email: whatever@whaever
	</li>
	<li>
John Doe<br>
Special Advisor<br>
Office: sdsd<br>
Tel: 310.3333333<br>
Email: whatever@whaever
	</li>

</ul> <!-- /.twoCols -->

</body>
</html>

Open in new window

Author

Commented:
Hi All

Sorry for the delay.  Just got notes from client.

Here's the link to page in progress.  Page with new table

Now it comes to styling, and for some reason my style sheet is not working.  I did some inline styles, and I realize I need to get rid of those.  (Centering of text, etc.)

Here is my css:  Link to css

I am using a #/ID because I only want this table affected by the css.  But something is wrong. Its not affecting the table.

And here are additional notes I received from client:  

<th >for this table only font should be centered, bold and 12 px)
<td> for this table only font should be  regular 11 px  align left
<td> for this table only email font size should be 11 px for all states
<td> for this table only  padding should be 5 pix top and bottom

Thanks,
Rowby
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Hey Rowby,

You have a couple of issues with your CSS. Unless you're using SASS, you can't nest CSS Rules - each needs to defined in it's own context, so you need something like:

#StaffPage {
    width: 100%;
    text-align: left;
    font-size: 11px;
}

#StaffPage th {
    text-align: center;
    font-weight: bold;
    font-size: 12px;
}

#StaffPage td {
    padding: 5px 0px;  
}

#StaffPage a {
    font-size: 11px;
}

Open in new window

Author

Commented:
Hi Chris

You'd think that after over 20 years on EE I'd know this!

Thanks!

It worked.
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Haha - the longer I do this, the more I forget ;)

Author

Commented:
Hi

I awarded the points -- I hope I did it correctly under this new UI.

:)

Rowby

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial