I am using to apply borders to specific columns only, it is not working at all to me..
other properites are working like background-color..
Is browsers doesn't support column level border on tables?
here my code
<style type="text/css">
.check_border {
border-right: 1px solid black;
background-color: #0000ff;
}
</style>
<table cellspacing='0'>
<colgroup>
<col/>
<col class="check_border"/>
<col class="check_border"/>
<col class="check_border"/>
<col/>
</colgroup>
<tr>
<td>Country</td>
<td>Salmon</td>
<td>Shrimps</td>
<td>Oysters</td>
<td>Rice</td>
<td>Wheat</td>
</tr>
<tr>
<td>United Kingdom</td>
<td>2050</td>
<td>1545</td>
<td>1156</td>
<td>5007</td>
<td>12254</td>
</tr>
<tr>
<td>United States</td>
<td>1358</td>
<td>1884</td>
<td>784</td>
<td>10597</td>
<td>24554</td>
</tr>
<tr>
<td>Australia</td>
<td>985</td>
<td>65</td>
<td>518</td>
<td>2548</td>
<td>10548</td>
</tr>
</table>
PPK has a good article about it all. The summary of it is that styling a col is somewhat variable in browser support and very troublesome in application.
http://www.quirksmode.org/css/columns.html
Related
I am having trouble using the < colgroup > tag to style the borders of a table column in CSS.
Here is the code I am trying to run:
<table style='font-size:18px; margin:auto; text-align:center; font-family:sans-serif; border-spacing:1.875em;'>
<caption style='text-align:left;'>Wait...</caption>
<colgroup>
<col span='1' style='border:solid firebrick;'>
</colgroup>
<tr>
<td style='color:blue;'>They chose:</td>
<td style='color:blue;'>They chose:</td>
</tr>
<tr>
<th>Option 1</th>
<th>Option 2</th>
</tr>
<tr>
<td>You: $4</td>
<td>You: $5</td>
</tr>
<tr>
<td>Them: $5</td>
<td>Them: $4</td>
</tr>
</table>
As you will see if you run it yourself, the code does not produce the firebrick border that I would like to have around the first column of my table. Even when I apply "border-spacing: 0em" and "border-collapse: collapse" to the < table > tag, the firebrick border does not appear.
Does anyone know what I am doing wrong?
You need to set border-collapse to collapse on the table.
<table style='border-collapse: collapse; font-size:18px; margin:auto; text-align:center; font-family:sans-serif; border-spacing:1.875em;'>
<caption style='text-align:left;'>Wait...</caption>
<colgroup>
<col span='1' style='border:solid firebrick;'>
</colgroup>
<tr>
<td style='color:blue;'>They chose:</td>
<td style='color:blue;'>They chose:</td>
</tr>
<tr>
<th>Option 1</th>
<th>Option 2</th>
</tr>
<tr>
<td>You: $4</td>
<td>You: $5</td>
</tr>
<tr>
<td>Them: $5</td>
<td>Them: $4</td>
</tr>
</table>
Obviously you will then need to make adjustments to get whatever spacing between cells you require.
I am trying to highlight a column with cells that use the span attribute, like a overarching header cell.
I tried it in the most obvious way by using the colgroup and col tag. Unfortunately, this delivers inconsistent results. An overarching cell is highlighted with the first column that spans it but not with consecutive ones (see the example below).
I can see that when using background color on different cols then the overarching cell, if highlighted, would have to have both colors which is not possible. Hence, I think the most consistent result would be that it gets no color. Maybe there some attribute or so I can set to get consistent highlighting?
Test: https://jsfiddle.net/m13d2arf/1/
.highlight {
background-color: red;
}
th, td {
border: 1px solid;
}
<table>
<colgroup>
<col class="highlight">
<col>
</colgroup>
<thead>
<tr>
<th colspan="2">1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</tbody>
</table>
<br>
<table>
<colgroup>
<col>
<col class="highlight">
</colgroup>
<thead>
<tr>
<th colspan="2">1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</tbody>
</table>
As a workaround you can override the background color on the th element.
th {
background-color: white;
}
.highlight {
background-color: red;
}
th {
background-color: white;
}
th, td {
border: 1px solid;
}
<table>
<colgroup>
<col class="highlight">
<col>
</colgroup>
<thead>
<tr>
<th colspan="2">1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</tbody>
</table>
<br>
<table>
<colgroup>
<col>
<col class="highlight">
</colgroup>
<thead>
<tr>
<th colspan="2">1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</tbody>
</table>
Is it possible to save col background color using colpan? In example below I want to achive yellow color in space for last col even if I use colspan="3".
Please, take a look to picture above, I want to achive this result using colspan="3"
Solution example
Wrong solution example
Thanks!
table,
th,
td {
border: 1px solid black;
}
<table>
<colgroup>
<col span="2" style="background-color:#E6E6DC">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td colspan="3">Error descriotion, last col should be yellow</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
You can just add an "id" to your td colspan,
<td colspan="3" id="your id here">Error descriotion, last col should be yellow</td>
and add this to css
#your id here{
background-color: yellow;
}
UPDATE
OP didn't make sense:
I want to achieve yellow color in space for last col even if I use colspan="3"
Ok, I chopped up that large 3 rowspan and now the last column is yellow.
Ok, kept middle row at colspan='3', and used <mark> in order to hold the styles within the <td>. See updated Snippet.
SNIPPET
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style='border-collapse:collapse;table-layout:fixed;width:325px;'>
<colgroup>
<col span="2" style="background-color:red">
<col span='1' style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td colspan='3' style='padding:0'>Error description, last col should
<mark style='line-height:1.2;width:12.25ex;border-right:1.75px solid yellow;border-left:3.75px solid yellow;display:inline-block;padding:0 12px 0 2px;position:relative; left: 3px;'> be yellow</mark>
</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
</body>
</html>
Try adding a class to col and apply the same style for the colspan.
table, th, td {
border: 1px solid black;
}
table col.col-color, table td[colspan="3"]{
background-color: yellow;
}
<table>
<colgroup>
<col span="2" style="background-color:red">
<col class="col-color">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td colspan="3">Error descriotion, last col should be yellow</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
I have a simple html table and have been trying to change the fonts and colours of specific cells but cant seem to do it.
Here is my table, all I have for my css on this table is shown.
table,
th,
td {
border: solid;
font-family: Mylius;
font-size: 12px;
}
<table>
<td colspan="3">Baggage allowance</td>
<colgroup>
<col width="800px">
</colgroup>
<tr>
<td>Passenger</td>
<td>Total</td>
</tr>
<tr>
<td>Test adult</td>
<td>46kg</td>
</tr>
<colgroup>
<col width="450px">
</colgroup>
<tr>
<td>Test infant</td>
<td>23kg</td>
</tr>
<tr>
<td colspan="3">All baggage should have handles</td>
</tr>
</table>
A simple google search for css styles should explain this to you. You should do a more thorough effort before asking questions. Anyway here is the basics:
You can set the style inline directly on the cell:
<td bgcolor="#FF00FF" style="font-family:courier">Test adult</td>
Or set a class on the specific cells you want to change and create a css rule.
<td class="red">Test adult</td>
and put the following inside your css file:
td.red {
background: red
}
Make changes inline. Like this:
<table>
<tr>
<td bgcolor="#FF0000">January</td>
<td bgcolor="#00FF00">$100</td>
</tr>
</table>
There is an example of what you are trying to do here:
http://www.techrepublic.com/article/why-css-styling-is-for-tables-too/
Simple question, I was wondering, what in 2011 is the right way to size html tables? (containing tabular data, of course!)
Should the following still be the way to go?
<tr>
<th width="45%">Name</th>
<th width="10%">Author</th>
<th width="20%">Description</th>
<th width="10%">Rating</th>
<th width="15%">Download</th>
</tr>
Or would it be better to give each column an ID (or class) and set its width with CSS?
Thank you for your input!
You can use col or colgroup for that purpose.
<table>
<col class="x"/>
<col class="y"/>
<col class="z"/>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
...and apply styles to the classes:
col.x {
...
}
In 2011? From about 2000 onwards it was the better approach to use class-names and CSS styles to give table-cells their width.
Unless they're all the same width, in which case just use:
th /* or td */ {
width: 20%;
}
You could, conceivably, use nth-child too:
tr th:nth-child(1) {
/* styles the first th of the tr */
}
JS Fiddle demo, using nth-child() css.
I've taken to using colgroup and col tags, like this:
<table>
<colgroup>
<col width="45%"></col>
<col width="10%"></col>
<col width="20%"></col>
<col width="10%"></col>
<col width="15%"></col>
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Author</th>
<th>Description</th>
<th>Rating</th>
<th>Download</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
My personal preference is to use the width attribute on column tags.
<table>
<col width="15%"></col>
<col width="20%"></col>
...etc...
It keeps the presentation part out of the table content, so to speak.