How can I make a whole column bold? - html

I have a big HTML table and I want to easily make the 16th column bold. Using <colgroup> and <col> is obviously not working:
<HTML>
<BODY>
<TABLE BORDER='1'>
<colgroup>
<col span='15'>
<col style='font-weight: bold;'>
</colgroup>
<TR>
<TH> </TH><TH>0</TH><TH>0.5</TH><TH>1</TH><TH>1.5</TH><TH>2</TH><TH>2.5</TH><TH>3</TH><TH>3.5</TH><TH>4</TH><TH>4.5</TH><TH>5</TH><TH>5.5</TH><TH>6</TH><TH>6.5</TH><TH>7</TH><TH>7.5</TH><TH>8</TH><TH>8.5</TH><TH>9</TH><TH>9.5</TH><TH>10</TH><TH>10.5</TH><TH>11</TH><TH>11.5</TH><TH>12</TH><TH>12.5</TH><TH>13</TH><TH>13.5</TH><TH>14</TH><TH>14.5</TH><TH>15</TH><TH>15.5</TH><TH>16</TH>
</TR>
<TR BGCOLOR='#DDDDDD'>
<TH ALIGN='LEFT'>ARG-21_VSDS (0):</TH><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.00</TD><TD>0.01</TD><TD>0.01</TD><TD>0.05</TD><TD>0.13</TD><TD>0.33</TD><TD>0.59</TD><TD>0.82</TD><TD>0.93</TD><TD>0.97</TD><TD>0.99</TD><TD>1.00</TD><TD>1.00</TD>
</TR>
<TR BGCOLOR='#DDDDDD'>
<TH ALIGN='LEFT'>ARG-21_VSDS (1):</TH><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>1.00</TD><TD>0.99</TD><TD>0.99</TD><TD>0.95</TD><TD>0.87</TD><TD>0.67</TD><TD>0.41</TD><TD>0.18</TD><TD>0.07</TD><TD>0.03</TD><TD>0.01</TD><TD>0.00</TD><TD>0.00</TD>
</TR>
</TABLE>
</BODY>
</HTML>


You can use CSS's nth-of-type selector to do this easily with no additional HTML markup required:
td:nth-of-type(16) {
font-weight: bold;
}


you should use classes on your tags and then target the within that class. for example:
<tr class="bold">some <td> tags</tr>
tr.bold td{
font-weight:bold;
}

Related

How do I apply border style attributes to a <colgroup> tag?

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.

Table. How to save background color of col using colSpan?

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>

How can I edit color, font, bg_color of specific cells in my table using css

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/

Avoid <colgroup> / <col> HTML tags to alter <thead> and <tfoot> rows?

Is there a way to limit/restrain the field of "operation" of styles defined in <colgroup> / <col> HTML tags.
Given the following table:
<table>
<colgroup>
<col align="center" />
<col align="center" style="background-color: lightgrey;" />
<col align="center" />
</colgroup>
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.a</td>
<td>1.b</td>
<td>1.c</td>
</tr>
<tr>
<td>2.a</td>
<td>2.b</td>
<td>2.c</td>
</tr>
</tbody>
</table>
I would like the background-color: lightgrey; not to be applied to the "Column B" cell (Second th in thead).

You can always apply a style to that cell in particular, or style the whole <tr> for your header row.
http://jsfiddle.net/QQ7LJ/
<tr style="background-color:white;">
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
</tr>
in short: no, there is no way to "limit" css, it will match every available target, and styling your <col> will match the entire column. In order to get different styling, you need to overwrite it somehow, the easiest way being to explicitly style the ones that dont match the general style.
Edit, you can also do this in a stylesheet block, by using CSS3 selectors :nth-of-type and scoping your selector to the <tbody> element.
http://jsfiddle.net/QQ7LJ/1/
tbody td:nth-of-type(2) {
background-color: lightgrey;
}​
and the changes to your HTML (everything else is the same)
<colgroup>
<col align="center" />
<col align="center"/>
<col align="center" />
</colgroup>

What is the right way to size html columns?

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.