Simple table with 2 columns broken up with header span.

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
LVL 9
Rowby GorenAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
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

0
David S.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

0
Rowby GorenAuthor Commented:
Looks good I'm checking it out.  Thanks Chris!!!
0
Determine the Perfect Price for Your IT Services

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

Rowby GorenAuthor 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
0
Chris StanyonWebDevCommented:
@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
0
David S.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

0
Rowby GorenAuthor 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
0
Chris StanyonWebDevCommented:
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

0
Rowby GorenAuthor Commented:
Hi Chris

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

Thanks!

It worked.
0
Chris StanyonWebDevCommented:
Haha - the longer I do this, the more I forget ;)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rowby GorenAuthor Commented:
Hi

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

:)

Rowby
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.