One thing nice about tables is your text gets centered top to bottom. How do I do that with a definition list?
<style type="text/css">
dt{
margin:0;
border-left: 2px solid #77AAFF;
border-bottom: 1px solid #77AAFF;
border-top: 1px solid #77AAFF;
border-right: 1px solid #77AAFF;
height:23px;
width:51px;
color: #00ffff;
font-weight: bold;
float:left;
}
dd{
border-right: 2px solid #77AAFF;
border-bottom: 1px solid #77AAFF;
border-top: 1px solid #77AAFF;
border-left: 1px solid #77AAFF;
height:23px;
margin-left:54px;
width:300px;
}
.msn{
border-top: 2px solid #77AAFF;
}
.email{
border-bottom: 2px solid #77AAFF;
height: 43px;
}
</style>
<dl>
<dt class="msn">MSN</dt>
<dd class="msn">[email protected]</dd>
<dt class="clear">AIM</dt>
<dd>Mr Initial Man</dd>
<dt class="clear">YIM</dt>
<dd>mrinitialman</dd>
<dt class="clear">ICQ</dt>
<dd>147433425 <strong>(I'm rarely on this one)</strong></dd>
<dt class="clear email">E-mail</dt>
<dd class="email">[email protected]<br />
<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e --></dd>
</dl>I asked the same question not long ago. If you're asking how to do what I think you're asking to do, then I think it might be impossible.
You mean to get a name then definition both on the same line and each name/definition pair on their own line? For each DD and DT to behave as seperate entities rather than the DT swallowing up the DD? So it goes more like <dt>term</dt><dd>definition</dd> rather than <dd><dt>term</dt>definition</dd>?
I gave up trying a while ago. No matter what I tried, I just couldn't make them sit in a uniform way (like they would in a table) without specifying width on some elements, instead of allowing the size of their contents size them naturally.I don't see what would be wroing with using a table for that data. Yes you could use a definition list but since you seem to be battling with it switch back to a table. It's still semantically correct (assuming you use <th> tags for the table headers).That's the thing though. there are no headers.
It's just:
age : 22
Location:England
and so on. It'd look a bit daft with "Field" over the field column and "Value" over the values column.You could arrange the table to be in the form of two columns rather than two rows.I know in another thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=48504">http://www.webdeveloper.com/forum/showt ... adid=48504</a><!-- m -->), it was suggested I use a definition list instead of a table. But when it comes to layout, I wonder if a table wouldn't be as semantically correct. I know that's an HTML thing, but I do like how a table looks.I'm not sure I understand what you mean. It appears correct as-is, unless you want it something like this:
MSN|AIM| YIM | ICQ |
<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->|Mr Initial Man|mrinitialman|147433425|
No?Avoid that use of the <dt> you are trying to make it jump through hoops it was never intended to do either use the standard list or a table.I'm not doing a horizontal one. I tried doing a vertical one. Y'know, a typical list with terms and values. I'll edit this post with a link to some examples when I've thrown some together.It is supposed to be a verticle list. What I was trying to do is lay it out like a table, and vertically center the text in relation to the cell.Would the vertical-align (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">http://www.w3.org/TR/CSS21/visudet.html ... ical-align</a><!-- m -->) property apply here?Is that a CSS thing or HTML thing.
Here's an example of what I'd like to do. (<!-- m --><a class="postlink" href="http://www.furnation.com/Mister_Initial_Man/lists-and-tables.html">http://www.furnation.com/Mister_Initial ... ables.html</a><!-- m -->) The list is on top, the table is on the bottom. I want the list to look like the table, if possible.It doesn't look bad as it is. Why not leave it alone?Originally posted by lavalamp
It doesn't look bad as it is. Why not leave it alone?
You mean the list? Because I think it looks rather ugly the way it us. I think the table looks a LOT better.The table looks a little cramped because it's only as wide as it needs to be (could be solved by a bit of padding though), this list looks fine because it's got a bit of breathing room.
Why not just use the table though? It's sematically correct (although technically you should use a couple of <th>'s to tell the user what the columns are).There. Less cramped.
(<!-- m --><a class="postlink" href="http://www.furnation.com/Mister_Initial_Man/lists-and-tables.html">http://www.furnation.com/Mister_Initial ... ables.html</a><!-- m -->)
I might turn my dt's into tables, since they occur elsewhere, and STILL look odd.The Panda Censor explanation is done as a definition list. (<!-- m --><a class="postlink" href="http://www.furnation.com/Mister_Initial_Man/Library/main.html#pandas">http://www.furnation.com/Mister_Initial ... tml#pandas</a><!-- m -->)Tables are fine, just make them nice and accessible:
<table width="350px" border="1" cellspacing="0" cellpadding="6" summary="A table of contact information.">
<caption>
Contact Me:
</caption>
<tr>
<th width="50px" id="h1"><strong>Method</strong></th>
<th width="300px" id="h2"><strong>My Address</strong></th>
</tr>
<tr>
<td headers="h1" class="contact" title="Microsoft Network Messenger">MSN</td>
<td headers="h2" class="sn">[email protected]</td>
</tr>
<tr>
<td headers="h1" class="contact" title="AOL Instant Messenger">AIM</td>
<td headers="h2" class="sn">Mr Initial Man</td>
</tr>
<tr>
<td headers="h1" class="contact" title="Yahoo Instant Messenger">YIM</td>
<td headers="h2" class="sn">mrinitialman</td>
</tr>
<tr>
<td headers="h1" class="contact" title="'I Seek You' Messenger">ICQ</td>
<td headers="h2" class="sn">147433425 <strong>(I'm rarely on this one)</strong></td>
</tr>
<tr>
<td headers="h1" class="contact">Email</td>
<td headers="h2" class="sn">[email protected]<br />[email protected]</td>
</tr>
</table>
Building Accessbile Tables (<!-- m --><a class="postlink" href="http://www.evolt.org/article/Building_accessible_tables/4090/42090/">http://www.evolt.org/article/Building_a ... 090/42090/</a><!-- m -->)The width attribute is deprecated for the TH (and TD) element.I know. I did them up in CSS.
Which reminds me...
<!-- m --><a class="postlink" href="http://www.furnation.com/Mister_Initial_Man/Library/adult.html">http://www.furnation.com/Mister_Initial ... adult.html</a><!-- m -->
How do I center images in a table with CSS?
Here' the CSS for the table.
table{
border:0;
margin:0 auto;
padding:0;
border-collapse:collapse;
}
caption{
color:#00ffff;
font-family:Old English Text MT, Verdana, Courier New, serif;
font-size:1.6em;
text-decoration:underline;
margin-bottom:10px;
}
th{
border-top:1px solid #1111ff;
border-bottom:1px solid #1111ff;
margin:0;
padding:5px;
font-size:1.1em;
color:#8888ff;
}
th#h1{
width:107px;
}
td{
padding:3px;
}
td.flag{
text-align:center;
}
td.describe{
text-align:left;
}
td.topmost{
padding-top:10px;
}
th#h2 is defined in an internal style sheet.Yes, sorry about that. Meh, guess I wasn't paying attention. Erm, if your images are indeed tabular data all one needs to do is text-align:center;Am I an IDIOT!
<img src=http://www.webdeveloper.com/forum/archive/index.php/"URL" alt="Yadda" class="left" width="xx" height="yy" />
And in setup.css (which affects ALL pages)
.left{
float:left;
}
Might help if I took that class out...Originally posted by MstrBob
Tables are fine, just make them nice and accessible:No <thead> and <tbody>?<thead> <tfoot> and <tbody> can be used, especially if there are many rows of data, or if there is more than one block of data. But for the table being used, I don't see it as particularly necessary.Where do those go?If you have large amounts of data, or separate data blocks, or simply feel like using them, each element must contain a rowgroup. <thead> would have the row of your headings, <th>. <tbody> would contain your bodies of information. <tfoot> would contain any data totals you have. So, something like:
<table border="1" cellspacing="0" cellpadding="6" summary="A table of contact information." style="width:350px;">
<caption>
Contact Me:
</caption>
<thead>
<tr>
<th width="50px" id="h1"><strong>Method</strong></th>
<th width="300px" id="h2"><strong>My Address</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td headers="h1" class="contact" title="Microsoft Network Messenger">MSN</td>
<td headers="h2" class="sn">[email protected]</td>
</tr>
<tr>
<td headers="h1" class="contact" title="AOL Instant Messenger">AIM</td>
<td headers="h2" class="sn">Mr Initial Man</td>
</tr>
<tr>
<td headers="h1" class="contact" title="Yahoo Instant Messenger">YIM</td>
<td headers="h2" class="sn">mrinitialman</td>
</tr>
<tr>
<td headers="h1" class="contact" title="'I Seek You' Messenger">ICQ</td>
<td headers="h2" class="sn">147433425 <strong>(I'm rarely on this one)</strong></td>
</tr>
<tr>
<td headers="h1" class="contact">Email</td>
<td headers="h2" class="sn">[email protected]<br />[email protected]</td>
</tr>
</tbody>
</table>Oh, very cool. Hmmmm... *Thinks of how he can use that when he uses tables for layout.*When you use <thead>, <tbody> and <tfoot>, it's important to know that the order that they should be used in is a little different to how you would expect.<table>
<thead>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>For more information on this (and tables in genral), read this (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3">http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3</a><!-- m -->).
<style type="text/css">
dt{
margin:0;
border-left: 2px solid #77AAFF;
border-bottom: 1px solid #77AAFF;
border-top: 1px solid #77AAFF;
border-right: 1px solid #77AAFF;
height:23px;
width:51px;
color: #00ffff;
font-weight: bold;
float:left;
}
dd{
border-right: 2px solid #77AAFF;
border-bottom: 1px solid #77AAFF;
border-top: 1px solid #77AAFF;
border-left: 1px solid #77AAFF;
height:23px;
margin-left:54px;
width:300px;
}
.msn{
border-top: 2px solid #77AAFF;
}
.email{
border-bottom: 2px solid #77AAFF;
height: 43px;
}
</style>
<dl>
<dt class="msn">MSN</dt>
<dd class="msn">[email protected]</dd>
<dt class="clear">AIM</dt>
<dd>Mr Initial Man</dd>
<dt class="clear">YIM</dt>
<dd>mrinitialman</dd>
<dt class="clear">ICQ</dt>
<dd>147433425 <strong>(I'm rarely on this one)</strong></dd>
<dt class="clear email">E-mail</dt>
<dd class="email">[email protected]<br />
<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e --></dd>
</dl>I asked the same question not long ago. If you're asking how to do what I think you're asking to do, then I think it might be impossible.
You mean to get a name then definition both on the same line and each name/definition pair on their own line? For each DD and DT to behave as seperate entities rather than the DT swallowing up the DD? So it goes more like <dt>term</dt><dd>definition</dd> rather than <dd><dt>term</dt>definition</dd>?
I gave up trying a while ago. No matter what I tried, I just couldn't make them sit in a uniform way (like they would in a table) without specifying width on some elements, instead of allowing the size of their contents size them naturally.I don't see what would be wroing with using a table for that data. Yes you could use a definition list but since you seem to be battling with it switch back to a table. It's still semantically correct (assuming you use <th> tags for the table headers).That's the thing though. there are no headers.
It's just:
age : 22
Location:England
and so on. It'd look a bit daft with "Field" over the field column and "Value" over the values column.You could arrange the table to be in the form of two columns rather than two rows.I know in another thread (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&threadid=48504">http://www.webdeveloper.com/forum/showt ... adid=48504</a><!-- m -->), it was suggested I use a definition list instead of a table. But when it comes to layout, I wonder if a table wouldn't be as semantically correct. I know that's an HTML thing, but I do like how a table looks.I'm not sure I understand what you mean. It appears correct as-is, unless you want it something like this:
MSN|AIM| YIM | ICQ |
<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->|Mr Initial Man|mrinitialman|147433425|
No?Avoid that use of the <dt> you are trying to make it jump through hoops it was never intended to do either use the standard list or a table.I'm not doing a horizontal one. I tried doing a vertical one. Y'know, a typical list with terms and values. I'll edit this post with a link to some examples when I've thrown some together.It is supposed to be a verticle list. What I was trying to do is lay it out like a table, and vertically center the text in relation to the cell.Would the vertical-align (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">http://www.w3.org/TR/CSS21/visudet.html ... ical-align</a><!-- m -->) property apply here?Is that a CSS thing or HTML thing.
Here's an example of what I'd like to do. (<!-- m --><a class="postlink" href="http://www.furnation.com/Mister_Initial_Man/lists-and-tables.html">http://www.furnation.com/Mister_Initial ... ables.html</a><!-- m -->) The list is on top, the table is on the bottom. I want the list to look like the table, if possible.It doesn't look bad as it is. Why not leave it alone?Originally posted by lavalamp
It doesn't look bad as it is. Why not leave it alone?
You mean the list? Because I think it looks rather ugly the way it us. I think the table looks a LOT better.The table looks a little cramped because it's only as wide as it needs to be (could be solved by a bit of padding though), this list looks fine because it's got a bit of breathing room.
Why not just use the table though? It's sematically correct (although technically you should use a couple of <th>'s to tell the user what the columns are).There. Less cramped.
(<!-- m --><a class="postlink" href="http://www.furnation.com/Mister_Initial_Man/lists-and-tables.html">http://www.furnation.com/Mister_Initial ... ables.html</a><!-- m -->)I might turn my dt's into tables, since they occur elsewhere, and STILL look odd.The Panda Censor explanation is done as a definition list. (<!-- m --><a class="postlink" href="http://www.furnation.com/Mister_Initial_Man/Library/main.html#pandas">http://www.furnation.com/Mister_Initial ... tml#pandas</a><!-- m -->)Tables are fine, just make them nice and accessible:
<table width="350px" border="1" cellspacing="0" cellpadding="6" summary="A table of contact information.">
<caption>
Contact Me:
</caption>
<tr>
<th width="50px" id="h1"><strong>Method</strong></th>
<th width="300px" id="h2"><strong>My Address</strong></th>
</tr>
<tr>
<td headers="h1" class="contact" title="Microsoft Network Messenger">MSN</td>
<td headers="h2" class="sn">[email protected]</td>
</tr>
<tr>
<td headers="h1" class="contact" title="AOL Instant Messenger">AIM</td>
<td headers="h2" class="sn">Mr Initial Man</td>
</tr>
<tr>
<td headers="h1" class="contact" title="Yahoo Instant Messenger">YIM</td>
<td headers="h2" class="sn">mrinitialman</td>
</tr>
<tr>
<td headers="h1" class="contact" title="'I Seek You' Messenger">ICQ</td>
<td headers="h2" class="sn">147433425 <strong>(I'm rarely on this one)</strong></td>
</tr>
<tr>
<td headers="h1" class="contact">Email</td>
<td headers="h2" class="sn">[email protected]<br />[email protected]</td>
</tr>
</table>
Building Accessbile Tables (<!-- m --><a class="postlink" href="http://www.evolt.org/article/Building_accessible_tables/4090/42090/">http://www.evolt.org/article/Building_a ... 090/42090/</a><!-- m -->)The width attribute is deprecated for the TH (and TD) element.I know. I did them up in CSS.
Which reminds me...
<!-- m --><a class="postlink" href="http://www.furnation.com/Mister_Initial_Man/Library/adult.html">http://www.furnation.com/Mister_Initial ... adult.html</a><!-- m -->
How do I center images in a table with CSS?
Here' the CSS for the table.
table{
border:0;
margin:0 auto;
padding:0;
border-collapse:collapse;
}
caption{
color:#00ffff;
font-family:Old English Text MT, Verdana, Courier New, serif;
font-size:1.6em;
text-decoration:underline;
margin-bottom:10px;
}
th{
border-top:1px solid #1111ff;
border-bottom:1px solid #1111ff;
margin:0;
padding:5px;
font-size:1.1em;
color:#8888ff;
}
th#h1{
width:107px;
}
td{
padding:3px;
}
td.flag{
text-align:center;
}
td.describe{
text-align:left;
}
td.topmost{
padding-top:10px;
}
th#h2 is defined in an internal style sheet.Yes, sorry about that. Meh, guess I wasn't paying attention. Erm, if your images are indeed tabular data all one needs to do is text-align:center;Am I an IDIOT!
<img src=http://www.webdeveloper.com/forum/archive/index.php/"URL" alt="Yadda" class="left" width="xx" height="yy" />
And in setup.css (which affects ALL pages)
.left{
float:left;
}
Might help if I took that class out...Originally posted by MstrBob
Tables are fine, just make them nice and accessible:No <thead> and <tbody>?<thead> <tfoot> and <tbody> can be used, especially if there are many rows of data, or if there is more than one block of data. But for the table being used, I don't see it as particularly necessary.Where do those go?If you have large amounts of data, or separate data blocks, or simply feel like using them, each element must contain a rowgroup. <thead> would have the row of your headings, <th>. <tbody> would contain your bodies of information. <tfoot> would contain any data totals you have. So, something like:
<table border="1" cellspacing="0" cellpadding="6" summary="A table of contact information." style="width:350px;">
<caption>
Contact Me:
</caption>
<thead>
<tr>
<th width="50px" id="h1"><strong>Method</strong></th>
<th width="300px" id="h2"><strong>My Address</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td headers="h1" class="contact" title="Microsoft Network Messenger">MSN</td>
<td headers="h2" class="sn">[email protected]</td>
</tr>
<tr>
<td headers="h1" class="contact" title="AOL Instant Messenger">AIM</td>
<td headers="h2" class="sn">Mr Initial Man</td>
</tr>
<tr>
<td headers="h1" class="contact" title="Yahoo Instant Messenger">YIM</td>
<td headers="h2" class="sn">mrinitialman</td>
</tr>
<tr>
<td headers="h1" class="contact" title="'I Seek You' Messenger">ICQ</td>
<td headers="h2" class="sn">147433425 <strong>(I'm rarely on this one)</strong></td>
</tr>
<tr>
<td headers="h1" class="contact">Email</td>
<td headers="h2" class="sn">[email protected]<br />[email protected]</td>
</tr>
</tbody>
</table>Oh, very cool. Hmmmm... *Thinks of how he can use that when he uses tables for layout.*When you use <thead>, <tbody> and <tfoot>, it's important to know that the order that they should be used in is a little different to how you would expect.<table>
<thead>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>For more information on this (and tables in genral), read this (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3">http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3</a><!-- m -->).