<div>
Hey Rowby, 
 
If you really just want a simple table, then something lke this would probably work for you 
 

<pre><code class="code-10 nolinks" id="code-20-42683459-1">&lt;table&gt;
 &lt;tr&gt;&lt;th colspan=&quot;2&quot;&gt;This is a header&lt;/th&gt;&lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;Column 1 Content&lt;/td&gt;
 &lt;td&gt;Column 2 Content&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;Column 1 Content&lt;/td&gt;
 &lt;td&gt;Column 2 Content&lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</code></pre>
 
And some basic styling: 
 

<pre><code class="code-1 nolinks" id="code-20-42683459-2">table { width: 100%; }
th { font-weight:bold; text-align:center; }
td { width: 50%; }
</code></pre>
</div>

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

<pre><code class="code-100 nolinks" id="code-20-42683645-1">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;style type=&quot;text/css&quot;&gt;
ul.twoCols {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
	max-width: 60em; /* optional */
}
ul.twoCols&gt;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;
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;


&lt;h1&gt;World Arts and Cultures/Dance&lt;/h1&gt;

&lt;h2&gt;Faculty Administration&lt;/h2&gt;

&lt;ul class=&quot;twoCols&quot;&gt;
	&lt;li&gt;
John Doe&lt;br&gt;
Chair&lt;br&gt;
Office: xxxx&lt;br&gt;
Tel: 310.80000&lt;br&gt;
Email: Whatever at whatever
	&lt;/li&gt;
	&lt;li&gt;
Jane Smih&lt;br&gt;
Vice Chair, Graduate Affairs&lt;br&gt;
Office: XXX&lt;br&gt;
Tel: 310.3333333&lt;br&gt;
Email: whatever@whatever
	&lt;/li&gt;

&lt;/ul&gt; &lt;!-- /.twoCols --&gt;



&lt;h2&gt;Student Office&lt;/h2&gt;

&lt;ul class=&quot;twoCols&quot;&gt;
	&lt;li&gt;
Mary Smith&lt;br&gt;
eAdvisor&lt;br&gt;
Office: x1233&lt;br&gt;
Tel: 310.333333&lt;br&gt;
Email: whatever@whtever
	&lt;/li&gt;
	&lt;li&gt;
Jim Jones&lt;br&gt;
Advisor&lt;br&gt;
Office: xxx&lt;br&gt;
Tel: 310.333333&lt;br&gt;
Email: whatever@whateer
	&lt;/li&gt;

&lt;/ul&gt; &lt;!-- /.twoCols --&gt;

&lt;h2&gt;Staff&lt;/h2&gt;

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

&lt;/ul&gt; &lt;!-- /.twoCols --&gt;

&lt;h2&gt;Art Global Health Center&lt;/h2&gt;

&lt;ul class=&quot;twoCols&quot;&gt;
	&lt;li&gt;
John Doe&lt;br&gt;
Director&lt;br&gt;
Office: DDD&lt;br&gt;
Tel: 310.3333333&lt;br&gt;
Email: whatever@whatever
	&lt;/li&gt;
	&lt;li&gt;
John Doe&lt;br&gt;
Director of Community&lt;br&gt;
Office: sdsd&lt;br&gt;
Tel: 310.3333333&lt;br&gt;
Email: whatever@whatever
	&lt;/li&gt;
	&lt;li&gt;
John Doe&lt;br&gt;
Fund Manager&lt;br&gt;
Office: sdsd&lt;br&gt;
Tel: 310.3333333&lt;br&gt;
Email: whatever@whatever
	&lt;/li&gt;
	&lt;li&gt;
John Doe&lt;br&gt;
Assistant Director&lt;br&gt;
Office: sdsd&lt;br&gt;
Tel: 310.3333333&lt;br&gt;
Email: whatever@whatever
 	&lt;/li&gt;
	&lt;li&gt;
John Doe&lt;br&gt;
Adminstrative Cordinator&lt;br&gt;
Office: sd sd&lt;br&gt;
Tel: 310.3333333&lt;br&gt;
Email: whatever@whaever
	&lt;/li&gt;
	&lt;li&gt;
John Doe&lt;br&gt;
Special Advisor&lt;br&gt;
Office: sdsd&lt;br&gt;
Tel: 310.3333333&lt;br&gt;
Email: whatever@whaever
	&lt;/li&gt;

&lt;/ul&gt; &lt;!-- /.twoCols --&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>

<div>
Looks good I'm checking it out. &nbsp;Thanks Chris!!!
</div>

<div>
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 &quot;Collapse&quot; that suggestion. &nbsp;And I don't now how to restore the suggestion. &nbsp;This is a new &quot;feature&quot; on EE -- I assume. &nbsp;Perhaps it will reappear???? 
 
IN other words, I did not mean to &quot;collapse&quot; anyone's suggestion... &nbsp;Perhaps the moderator can &quot;bring it bacik:???? 
 
Rowby
</div>

<div>
@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
</div>

<div>
<blockquote>
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). 
</blockquote>
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. &lt;h2&gt; or &lt;h3&gt;) for each. This way has the added benefit of being responsive, even if it's not currently a project requirement. 
 

<pre><code class="code-100 nolinks" id="code-20-42683909-1">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;style type=&quot;text/css&quot;&gt;
ul.twoCols {
	margin: 0 0 1em;
	padding: 0;
	list-style: none;
	max-width: 60em; /* optional */
}
ul.twoCols&gt;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;
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;


&lt;h1&gt;World Arts and Cultures/Dance&lt;/h1&gt;

&lt;h2&gt;Faculty Administration&lt;/h2&gt;

&lt;ul class=&quot;twoCols&quot;&gt;
	&lt;li&gt;
John Doe&lt;br&gt;
Chair&lt;br&gt;
Office: xxxx&lt;br&gt;
Tel: 310.80000&lt;br&gt;
Email: Whatever at whatever
	&lt;/li&gt;
	&lt;li&gt;
Jane Smih&lt;br&gt;
Vice Chair, Graduate Affairs&lt;br&gt;
Office: XXX&lt;br&gt;
Tel: 310.3333333&lt;br&gt;
Email: whatever@whatever
	&lt;/li&gt;

&lt;/ul&gt; &lt;!-- /.twoCols --&gt;



&lt;h2&gt;Student Office&lt;/h2&gt;

&lt;ul class=&quot;twoCols&quot;&gt;
	&lt;li&gt;
Mary Smith&lt;br&gt;
eAdvisor&lt;br&gt;
Office: x1233&lt;br&gt;
Tel: 310.333333&lt;br&gt;
Email: whatever@whtever
	&lt;/li&gt;
	&lt;li&gt;
Jim Jones&lt;br&gt;
Advisor&lt;br&gt;
Office: xxx&lt;br&gt;
Tel: 310.333333&lt;br&gt;
Email: whatever@whateer
	&lt;/li&gt;

&lt;/ul&gt; &lt;!-- /.twoCols --&gt;

&lt;h2&gt;Staff&lt;/h2&gt;

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

&lt;/ul&gt; &lt;!-- /.twoCols --&gt;

&lt;h2&gt;Art Global Health Center&lt;/h2&gt;

&lt;ul class=&quot;twoCols&quot;&gt;
	&lt;li&gt;
John Doe&lt;br&gt;
Director&lt;br&gt;
Office: DDD&lt;br&gt;
Tel: 310.3333333&lt;br&gt;
Email: whatever@whatever
	&lt;/li&gt;
	&lt;li&gt;
John Doe&lt;br&gt;
Director of Community&lt;br&gt;
Office: sdsd&lt;br&gt;
Tel: 310.3333333&lt;br&gt;
Email: whatever@whatever
	&lt;/li&gt;
	&lt;li&gt;
John Doe&lt;br&gt;
Fund Manager&lt;br&gt;
Office: sdsd&lt;br&gt;
Tel: 310.3333333&lt;br&gt;
Email: whatever@whatever
	&lt;/li&gt;
	&lt;li&gt;
John Doe&lt;br&gt;
Assistant Director&lt;br&gt;
Office: sdsd&lt;br&gt;
Tel: 310.3333333&lt;br&gt;
Email: whatever@whatever
 	&lt;/li&gt;
	&lt;li&gt;
John Doe&lt;br&gt;
Adminstrative Cordinator&lt;br&gt;
Office: sd sd&lt;br&gt;
Tel: 310.3333333&lt;br&gt;
Email: whatever@whaever
	&lt;/li&gt;
	&lt;li&gt;
John Doe&lt;br&gt;
Special Advisor&lt;br&gt;
Office: sdsd&lt;br&gt;
Tel: 310.3333333&lt;br&gt;
Email: whatever@whaever
	&lt;/li&gt;

&lt;/ul&gt; &lt;!-- /.twoCols --&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>

Rowby Goren

<div>
Hi All 
 
Sorry for the delay. &nbsp;Just got notes from client. 
 
Here's the link to page in progress. &nbsp;<a href="https://goo.gl/4hpNXd" rel="ugc">Page with new table</a> 
 
Now it comes to styling, and for some reason my style sheet is not working. &nbsp;I did some inline styles, and I realize I need to get rid of those. &nbsp;(Centering of text, etc.) 
 
Here is my css: &nbsp;<a href="https://goo.gl/WxejXy" rel="ugc">Link to css</a> 
 
I am using a #/ID because I only want this table affected by the css. &nbsp;But something is wrong. Its not affecting the table. 
 
And here are additional notes I received from client: &nbsp; 
 
&lt;th &gt;for this table only font should be centered, bold and 12 px) 
&lt;td&gt; for this table only font should be &nbsp;regular 11 px &nbsp;align left 
&lt;td&gt; for this table only email font size should be 11 px for all states 
&lt;td&gt; for this table only &nbsp;padding should be 5 pix top and bottom 
 
Thanks, 
Rowby
</div>

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

<pre><code class="code-10 nolinks" id="code-20-42689518-1">#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;
}
</code></pre>
</div>

<div>
Hi Chris 
 
You'd think that after over 20 years on EE I'd know this! 
 
Thanks! 
 
It worked.
</div>

<div>
Hi 
 
I awarded the points -- I hope I did it correctly under this new UI. 
 
:) 
 
Rowby
</div>

<div>
<div class="content wysiwyg-content">
Hello 
 
I think I need an old fashioned table to do this. &nbsp;It's for a website that is NOT responsive. &nbsp;They need a very structured two column list of &nbsp;faculty members. &nbsp;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 &nbsp;to create the two colums or fancy html. &nbsp;I think a table will do it. But am looking for your advice and suggestions. &nbsp;I WILL need css to style the text and headers, though... 
 
Thanks for your help, suggestions and solution. 
 
Rowby 
<a href="https://filedb.experts-exchange.com/incoming/2018/09_w38/1384823/School-EE-a.pdf" target="_blank" class="file-inline" title="School-EE-a.pdf (143 KB)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M67.508 468.467c-58.005-58.013-58.016-151.92 0-209.943l225.011-225.04c44.643-44.645 117.279-44.645 161.92 0 44.743 44.749 44.753 117.186 0 161.944l-189.465 189.49c-31.41 31.413-82.518 31.412-113.926.001-31.479-31.482-31.49-82.453 0-113.944L311.51 110.491c4.687-4.687 12.286-4.687 16.972 0l16.967 16.971c4.685 4.686 4.685 12.283 0 16.969L184.983 304.917c-12.724 12.724-12.73 33.328 0 46.058 12.696 12.697 33.356 12.699 46.054-.001l189.465-189.489c25.987-25.989 25.994-68.06.001-94.056-25.931-25.934-68.119-25.932-94.049 0l-225.01 225.039c-39.249 39.252-39.258 102.795-.001 142.057 39.285 39.29 102.885 39.287 142.162-.028A739446.174 739446.174 0 0 1 439.497 238.49c4.686-4.687 12.282-4.684 16.969.004l16.967 16.971c4.685 4.686 4.689 12.279.004 16.965a755654.128 755654.128 0 0 0-195.881 195.996c-58.034 58.092-152.004 58.093-210.048.041z"/></svg>School-EE-a.pdf</a>
</div>
</div>

School-EE-a.pdf

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

Simple table with 2 columns broken up with header span.

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.