By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,067 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

Table layout using CSS

P: n/a
Hi everyone. I'm trying to emulate a simple table layout using CSS only.
This hyperlink (http://homepage.ntlworld.com/r.morris7/tabledemo.htm) shows
the intended result, which I've knocked up using a table.

Please note a couple of things. The second line of text in the right-hand
columns don't wrap beneath the italic heading. The first column contains a
heading (of sorts, not an actual <hx> element) that is aligned to the right.

Any help would be much appreciated!

Oli

Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
news.ntlworld.com wrote:
Hi everyone. I'm trying to emulate a simple table layout using CSS only.
This hyperlink (http://homepage.ntlworld.com/r.morris7/tabledemo.htm) shows
the intended result, which I've knocked up using a table.
It always great when people are going to a more structured document.
Please note a couple of things. The second line of text in the right-hand
columns don't wrap beneath the italic heading. The first column contains a
heading (of sorts, not an actual <hx> element) that is aligned to the right.

Any help would be much appreciated!


Could you explain what the content is going to be? There are multiple
solutions for this problem without tables, but to select the right one,
we (I) need to know what kind of data is going to be in there.
--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #2

P: n/a
Oli
> Could you explain what the content is going to be? There are multiple
solutions for this problem without tables, but to select the right one,
we (I) need to know what kind of data is going to be in there.


Hi Anne, it's actually going to be used for part of an HTML copy of my
Curriculum Vitae (resume). I'd like to have a heading (e.g. Languages) and
then a body of text following (e.g. Java, HTML, SQL etc.). The body of text
is only 2-4 lines of text but it's important that it doesn't wrap beneath
the heading.

I've had some mixed success, for example:

<p>Languages<span style="left: 150px; position: absolute">Java, JSP,
Servlets and JavaBeans; HTML, CSS, DOM and JavaScript; XML, DTD, XSLT and
X-Schema; SQL, PL-SQL and Oracle XSQL; UML.</span></p>

This almost works but I can't align the first word ('Languages') to the
right (refer to the table mockup for an example).

I also experimented with DIV layers:

<div style="position: absolute; text-align: right; width:
150px"><p>Languages</p></div>
<div style="position: absolute; left: 170px"><p>Java, JSP, Servlets and
JavaBeans; HTML, CSS, DOM and JavaScript; XML, DTD, XSLT and X-Schema; SQL,
PL-SQL and Oracle XSQL; UML.</p></div>

However, when I added more DIV layers (i.e. for another heading and body of
text) it overlapped the first heading and body of text. I suppose I could
offset the subsequent layers but I'd like a more fluid design which would
stand up to fonts being resized etc. and would be suitable for print and
screen.
Jul 20 '05 #3

P: n/a
Oli wrote:
Hi Anne, it's actually going to be used for part of an HTML copy of my
Curriculum Vitae (resume). I'd like to have a heading (e.g. Languages) and
then a body of text following (e.g. Java, HTML, SQL etc.). The body of text
is only 2-4 lines of text but it's important that it doesn't wrap beneath
the heading.


That makes it more clear. Thanks.

Without DOCTYPES etc, just a simple example:

<style type="text/css">
html{
font:85%/1.3 Arial,sans-serif;
}
h1{
font-size:1.5em
}
h2{
float:left;
width:15em;
font-size:1em;
}
div.section{
width:20em;
}
p{
margin:0;
padding:.1em 1em;
}
</style>
<h1>Document title</h1>
<h2>Section header</h2>
<div class="section">
<p>Bla bla bla</p>
<p>Bla bla bla</p>
</div>
<h2>Section header</h2>
<div class="section">
<p>Bla bla bla</p>
<p>Bla bla bla</p>
</div>
--
Anne van Kesteren
<http://www.annevankesteren.nl/>
Jul 20 '05 #4

P: n/a
Oli
Thanks for the reply, Anne. It's pointed me in some new directions to
experiment with.
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.