tables make me emotionally angry

**sniperman** · 02-05-2010, 12:08 PM

So I've spent 4 good hours trying to figure out, again, how to set widths on column groups, without excessive markup. I even read the W3C standards, which, again, leave me very bereft on implementation. They really should beef up the "how to" section.

Originally I thought it was a Firefox only issue because background colors and borders when set through CSS seem to work, like so

Code:

<style type="text/css">
tr td	{color:red;}
tr td td	{color:blue;}
tr td td td	{color:green;}
</style>

and here is my original code stripped down of its content

Code:

  <table>
  <caption align="top">
    where do the colgroup and cols go
  </caption>
     
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>            
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>            
  </tr>
</table>

For the life of me I have tried every combination possible except to set the width in each TD cell. I just want to set the width of the three columns to 150px 42px and 150px respectively.

**djr33** · 02-06-2010, 08:12 AM

Well, it's a little complex. I'm not exactly sure what you're trying to accomplish, either.

The code above has a floating </tr> tag, so I don't see what the overall picture is.

If you are trying to have some rows with fewer or more cells than others, you can use colspan="3" to have one cell go across 3 columns.

Regarding making the width of all cells in a single column match, I believe this can be done by just setting the width of the top cell. The others will by default align the same way. The only problem there is that if you have lots of other markup going on it may make things get messy. And of course content that is too large to fit in a cell will make things slide around in an odd way as well. I suppose you could just make the css force any overlapping content to be hidden so that you don't run into that problem. Try my idea (just setting the width of the top cell in a column) in a new table. If that works, try applying it (while removing as much complex styling from your table as possible).

Does that help? Am I understanding you correctly?

**traq** · 02-06-2010, 08:31 AM

table-layout: fixed; might also be useful, depending on your objectives

**stringcugu** · 02-06-2010, 10:34 AM

Code:

<style>
table.menu td
{color: #800040;
background-color: #C0C0C0;
border: 0px;
padding: 0px 8px 2px;
font-family: Arial;
font-size: 100%;
font-weight:bolder;
white-space: nowrap;}
a{font-family:Arial}
a:hover{color: red;background-color:white}
h1{font-family:"Futura MdCn BT"}
h2{font-family:"Futura MdCn BT"}
h3{font-family:"Futura MdCn BT"}
h4{font-family:"Futura MdCn BT"}
td{font-family:"Century Schoolbook"}
p {font-family:"Century Schoolbook"}
blockquote{background-color:#FFF7B9}
</style> 
<script>
function red(){document.fgColor="red"}
function blue(){document.fgColor="blue"}
function fuchsia(){document.fgColor="fuchsia"}
function yellow(){document.fgColor="yellow"}
function black(){document.fgColor="black"}
</script> 
<style>
.tabler{{ font-weight: bold; background-color: rgb(255,255,255) }}
</style> 
In the last lesson we had java script changing
<table class="tabler" border="0" cellpadding="5"cellspacing="0">
<tr>
<td bgcolor="red"><a href="#" onclick="red()">red</a></td>
<td bgcolor="#9B9BFF"><a href="#" onclick="blue()">blue</a></td>
</tr><tr>
<td bgcolor="#ff00ff"><a href="#" onclick="fuchsia()">fuchsia</a></td>
<td bgcolor="yellow"><a href="#" onclick="yellow()">yellow</a></td>
</tr>
</table>

**tpravioti** · 02-08-2010, 11:24 AM

i don't understand exactly what are you trying to do..

but fix this thing:

Code:

<table><tr>
  <caption align="top">
    where do the colgroup and cols go
  </caption>
     
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>            
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>            
  </tr>
</table>

unless you need this:

Code:

<html>
<head>
<style type="text/css">
.red	{color:red;}
.blue	{color:blue;}
.green	{color:green;}
</style>
</head>
<body>
<table><tr>
  <caption align="top" class="red">
    where do the colgroup and cols go
  </caption>
     
  </tr>
  <tr class="blue">
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>            
  </tr>
  <tr class="green">
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>            
  </tr>
</table>
</body>
</html>

**Snookerman** · 02-08-2010, 11:43 AM

If I understand your first post correctly, what you are trying to do is give each column a different style. Look into pseudo classes, you can use them to target the first/second/third/every other/etc. element. Not all browsers support them though. You could also use the plus symbol (td + td) which targets the element immediately after the first one. Google play around with them.

Good luck!

**sniperman** · 06-05-2010, 04:09 AM

i noticed my newbie code had a floating <tr> tag around the <caption> tag so ignore that <tr>.

The purpose of the exercise was to learn different methods to apply a width to the columns in a table. I know widths on rows is relatively easy because classes can be used, but not so for columns because HTML does not have any real standards factored in.

I heard <colgroup> or <col> could be used. The width on the top row of each column is another method but it produces markup I would rather control in CSS.

The product I was trying to create was a table with columns controlled by a <colgroup class="style"> and the styles can be controlled externally via CSS.

Thread: tables make me emotionally angry

Thread Tools

Search Thread

tables make me emotionally angry

Bookmarks

Bookmarks

Posting Permissions