Styling table columns (COLGROUP, COL SPAN etc.)

HTML & CSS
1

I’m almost embarrassed to ask for help with this because the solution is probably a no brainer but I’ve been at it for over 2 hours. I’ll use it as a template so that in the future I can reference it. I’ve kept this stripped down and simple:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FOUR COLUMNS</title>
</head>

<body style="width: 100%; font-size: 16px; line-height: 18px; font-family: LUCIDA CONSOLE, MONOSPACE;">

<table style="border: 1px solid BLACK; margin-left: AUTO; margin-right: AUTO; width: 80%; height: AUTO;" cellpadding="2" cellspacing="0">

<colgroup style="text-align: RIGHT;"></colgroup>
<colgroup style="text-align: CENTER;"></colgroup>
<colgroup style="text-align: LEFT;"></colgroup>
<colgroup style="text-align: LEFT;"></colgroup>

<tbody>
<tr>
<td>RR RRRR R RR RRRRR</td>
<td>CC</td>
<td>333333 3 33</td>
<td>44 44444 44 44444 4 44444</td>
</tr>

<tr>
<td>RR RRRR R RR RRRRR</td>
<td>CC</td>
<td>333333 3 33</td>
<td>44 44444 44 44444 4 44444</td>
</tr>

<tr>
<td>RR RRRR R RR RRRRR</td>
<td>CC</td>
<td>333333 3 33</td>
<td>44 44444 44 44444 4 44444</td>
</tr>

<tr>
<td>RR RRRR R RR RRRRR</td>
<td>CC</td>
<td>333333 3 33</td>
<td>44 44444 44 44444 4 44444</td>
</tr>

<tr>
<td>RR RRRR R RR RRRRR</td>
<td>CC</td>
<td>333333 3 33</td>
<td>44 44444 44 44444 4 44444</td>
</tr>

<tr>
<td>RR RRRR R RR RRRRR</td>
<td>CC</td>
<td>333333 3 33</td>
<td>44 44444 44 44444 4 44444</td>
</tr>

</tbody>
</table>

</body>
</html>
2

You can’t control the text alignment with the col/colgroup tags as only the following properties are allowed:

background-color
border
width
visibility

Although older browsers did vary in what was allowed the above list is the only safe options.

Usually you would use the colgroup as the wrapper and then have a col element for each column in the table although you can span more than one column with the span attribute.

3 Likes
3

So none of the COL tags work with tables? I don’t get it. Why have these tags if they can’t be used? :flushed: I have some tableless templates so I may be returning to my thread.

#COL, COL everywhere.
##And not a drop to drink!

4

What’s in a column? Table cells, correct?
AFAIK they can be styled.

Just need to find a supported selector to use.

5

No they only apply to tables. I’m not sure what you are saying?

You can style width, background, border and visibility as I mentioned above. Usually you would use thr col tag to provide column colours easily. Other styles are not really relevant as tds are not descendants of the col tag and cannot inherit text alignment.

It would be nice if more styles were allowed but that’s just the way it is. In the very very old days you could use the deprecated align attribute on the column but not these days.

You can do things like this::

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
	font-size:100%;
	line-height: 18px;
	font-family:'lucida console', monospace;
}
table{
	border: 1px solid black; 
	margin:auto; 
	width: 80%;
	border-collapse:collapse; 
}
td{padding:2px;}

.col1{background:red}
.col2{background:blue}
.col3{background:orange}
.col4{background:green}


td:nth-child(1){text-align:right}
td:nth-child(2){text-align:center}
td:nth-child(3){text-align:left}
td:nth-child(4){text-align:left}

</style>
</head>

<table>
  <colgroup>
  <col class="col1">
  <col class="col2">
  <col class="col3">
  <col class="col4">
  </colgroup>

  <tbody>
    <tr>
      <td>RR RRRR R RR RRRRR</td>
      <td>CC</td>
      <td>333333 3 33</td>
      <td>44 44444 44 44444 4 44444</td>
    </tr>
    <tr>
      <td>RR RRRR R RR RRRRR</td>
      <td>CC</td>
      <td>333333 3 33</td>
      <td>44 44444 44 44444 4 44444</td>
    </tr>
    <tr>
      <td>RR RRRR R RR RRRRR</td>
      <td>CC</td>
      <td>333333 3 33</td>
      <td>44 44444 44 44444 4 44444</td>
    </tr>
    <tr>
      <td>RR RRRR R RR RRRRR</td>
      <td>CC</td>
      <td>333333 3 33</td>
      <td>44 44444 44 44444 4 44444</td>
    </tr>
    <tr>
      <td>RR RRRR R RR RRRRR</td>
      <td>CC</td>
      <td>333333 3 33</td>
      <td>44 44444 44 44444 4 44444</td>
    </tr>
    <tr>
      <td>RR RRRR R RR RRRRR</td>
      <td>CC</td>
      <td>333333 3 33</td>
      <td>44 44444 44 44444 4 44444</td>
    </tr>
  </tbody>
</table>
</body>
</html>
2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.