Tables Not Behaving

For that kind of thing, probably okay to use a table – it’s arguably “tabular data.” But the way you have it set up isn’t how tables work – you have this:

<td>One-on-One Two Climbers Three Climbers Four Climbers Five Climbers Six Climbers Large Group</td>
<td></td>
<td>$300/ea $150/ea $125/ea $100/ea $90/ea $85/ea Inquire</td>

What you want is:

<tr>
  <td>One-on-One</td>
  <td>$300/ea</td>
</tr>
<tr>
  <td>Two Climbers</td>
  <td>$150/ea</td>
</tr>
<tr>
  <td>Three Climbers</td>
  <td>$125/ea</td>
</tr>
<tr>
  <td>Four Climbers</td>
  <td>$100/ea</td>
</tr>
<tr>
  <td>Five Climbers</td>
  <td>$90/ea</td>
</tr>
<tr>
  <td>Six Climbers</td>
  <td>$85/ea</td>
</tr>
<tr>
  <td>Large Group</td>
  <td>Inquire</td>
</tr>

For table CSS, see: https://www.w3schools.com/css/css_table.asp

Thanks WPyogi. Tried your solution, but the result was not right. I think it was something to do with the .columns classes in the theme CSS code… tables don’t appear to be limited to the columns, so the code you offered ended up hidden behind the 2nd and 3rd columns. I ended up going to this:

<table style="width: 215px;" border="0">
<tbody>
<tr>
<td style="width:55%;">One-on-One
Two Climbers
Three Climbers
Four Climbers
Five Climbers
Six Climbers
Large Group</td>
<td style="width:35%;"></td>
<td style="width:10%;">$300/ea
$150/ea
$125/ea
$100/ea
$90/ea
$85/ea
Inquire</td>
</tr>
</tbody>
</table>

[Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

This works well in full-width, but parts of the table still hide at some screen sizes. Better than before, at least! But not quite awesome.

Nick

Actually it’s not tabulated data at all. It’s should be just a list – either unordered or definition.

But there are two columns of information… isn’t that tabulated data? If I do a simple list, how do I make the products on the left and the price on the right so each data set lines up on vertical margins?

Here’s an example of what Esmi’s saying https://cssdesk.com/fxcR6

Nope – it’s simply a list of items and their corresponding prices. By comparison, this page contains real tabulated data. Generally speaking, if you wouldn’t put the content in a spreadsheet, then you shouldn’t mark it up as a table either.

If it was my page, I’d use something like:

<dl id="price-list">
<dt> One-on-One</dt>
<dd>$300/ea</dd>

<dt>Two Climbers</dt>
<dd>$150/ea</dd>

<dt>Three Climbers</dt>
<dd>$125/ea</dd>

<dt>Four Climbers</dt>
<dd>$100/ea</dd>

<dt>Five Climbers</dt>
<dd>$90/ea</dd>

<dt>Six Climbers</dt>
<dd>$85/ea</dd>

<dt>Large Group</dt>
<dd>Inquire</dd>
</dl>

with the following CSS:

#price-list dt {
    clear: left;
    display: block;
    float: left;
}
#price-list dd {
    display: inline-block;
    float: left;
    margin-left: 1em;
}

Then tweak the CSS to suit by applying a fixed width (in ems) to the dt tag.

Thanks Andrew & esmi, this is awesome help. My CSS skills are improving, but this was a little over my head. Your examples are super helpful… I will adjust accordingly and report back.

Glad we could help ??

Okay, so I tried esmi’s suggestion (thank you) here:

https://www.devilslakeclimbingguides.com/devils-lake-state-park/camping/devils-lake-campgrounds/

I used this as my html:

<h2>Camping Fees</h2>
<dl id="camping-fees"><dt>Standard Non-Electric (Tent)</dt><dd>$15.00 / night</dd>
<dl><dt>Standard Electric</dt><dd>$20.00 / night</dd>
<dl><dt>Teepee</dt><dd>$35.00 / night</dd>
<dl><dt>Group Site (All Non-Electric)</dt><dd>$40.00 / night</dd>
<dl><dt>Reservation Fee</dt><dd>$9.70 / res.</dd>
<dl><dt>Cancellation Fee</dt><dd>$5 / trans.</dd>
<dt>Change Fee</dt><dd>$5 / res.</dd></dl>

And this as my css:

#camping-fees dt {
    clear: left;
    display: block;
    float: left;
}
#camping-fees dd {
    display: inline-block;
    float: left;
    margin-left: 1em;
}

But the result is clearly not right. Am I doing something incorrectly? Or is my code somehow being stripped? I ask that because when I examine the page with Inspect Element, I don’t see the descriptive list tags.

Thanks!
Nick