Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2018
    Location
    Bournemouth
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need help with colored rows

    Hello.
    I would like to choose a background color for specific rows in a table. The rows I want to color are the Points Won and Total Points Won rows. The problem I'm getting is due to the fact that some of the events cover a different number a rows as shown in the attached file.
    By the way, I have a table with masses of information to present, especially when the new football season starts.
    Hope someone can help.
    Thank you.

    table code.txt

  2. #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,312
    Thanks
    3
    Thanked 564 Times in 550 Posts
    Hi there tomhatten,

    and a warm welcome to these forums.

    Does this help...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
    body {
        background-color: #f9f9f9;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
    #container {
        padding: 0.5em;
        border: 1px solid #999;
        background-color: #f5ecce; 
     }
    h1 {
        margin: 0 0 1.5em;
        font-size: 1em;
        text-align: center;
        text-decoration: underline;
     }
    .gridtable {
        border: 1px solid #999;
        border-collapse: collapse;
        font-size: 0.8em;;
        color: #333;	
        text-align: center;
     }
    .gridtable col {
        width: 3%;
     }
    .gridtable th, .gridtable td {
        padding: 0.2em;
        border: 1px solid #666;
        background-color: #b5cfd2;
     }
    .gridtable td {
        background-color: #fff;
     }
    .gridtable td:nth-child( 7n+1 ) {
        text-align: left;
     }
    .gridtable tr:nth-child( 5n+3 ) td {
        background-color: #fee;
     }
    .gridtable tr:nth-child( 5n+4 ) td {
        background-color: #eef;
     }
    </style>
    
    </head>
    <body> 
    
    <div id="container">
    
    <h1>2017/2018 Competition Points Won Table</h1>
    
    <table class="gridtable">
    <colgroup>
            <col span="1">
            <col span="1">
            <col span="1">
            <col span="1">
            <col span="1">
            <col span="1">
            <col span="1">
    </colgroup>
    <tr>
    	<th>Thu 4 Jan - Sun 7 Jan</th>
    	<th>gb</th>
    	<th>GWolf1</th>
    	<th>jkb</th>
    	<th>ManUtdFan34</th>
    	<th>Scouse</th>
    	<th>spurslad</th>
    </tr><tr>
    	<td>Sentry Tournament of Champions</td>
    	<td><!-- gb -->4</td>
    	<td><!-- GWolf1 -->13</td>
    	<td><!-- jkb -->7</td>
    	<td><!-- ManUtdFan34 -->7</td>
    	<td><!-- Scouse -->11</td>
    	<td><!-- spurslad -->11</td>
    </tr><tr>
    	<td>Points Won</td>
    	<td><!-- gb -->10</td>
    	<td><!-- GWolf1 -->8</td>
    	<td><!-- jkb -->9</td>
    	<td><!-- ManUtdFan34 -->7</td>
    	<td><!-- Scouse -->13</td>
    	<td><!-- spurslad -->10</td>
    </tr><tr>
    	<td>Total Points Won</td>
    	<td><!-- gb -->20</td>
    	<td><!-- GWolf1 -->4</td>
    	<td><!-- jkb -->8</td>
    	<td><!-- ManUtdFan34 -->5</td>
    	<td><!-- Scouse -->4</td>
    	<td><!-- spurslad -->3</td>
    </tr><tr>
    	<th>Thu 11 Jan - Sun 14 Jan</th>
    	<th>gb</th>
    	<th>GWolf1</th>
    	<th>jkb</th>
    	<th>ManUtdFan34</th>
    	<th>Scouse</th>
    	<th>spurslad</th>
    </tr><tr>
    	<td>Sony Open</td>
    	<td><!-- gb -->6</td>
    	<td><!-- GWolf1 -->9</td>
    	<td><!-- jkb -->8</td>
    	<td><!-- ManUtdFan34 -->9</td>
    	<td><!-- Scouse -->11</td>
    	<td><!-- spurslad -->7</td>
    </tr><tr>
    	<td>BMW South African Open</td>
    	<td><!-- gb -->4</td>
    	<td><!-- GWolf1 -->4</td>
    	<td><!-- jkb -->8</td>
    	<td><!-- ManUtdFan34 -->5</td>
    	<td><!-- Scouse -->10</td>
    	<td><!-- spurslad -->7</td>
    </tr><tr>
    	<td>Points Won</td>
    	<td><!-- gb -->10</td>
    	<td><!-- GWolf1 -->8</td>
    	<td><!-- jkb -->9</td>
    	<td><!-- ManUtdFan34 -->7</td>
    	<td><!-- Scouse -->13</td>
    	<td><!-- spurslad -->10</td>
    </tr><tr>
    	<td>Total Points Won</td>
    	<td><!-- gb -->20</td>
    	<td><!-- GWolf1 -->4</td>
    	<td><!-- jkb -->8</td>
    	<td><!-- ManUtdFan34 -->5</td>
    	<td><!-- Scouse -->4</td>
    	<td><!-- spurslad -->3</td>
    </tr>
    </table>
    
    </div>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  3. Users who have thanked coothead for this post:

    tomhatten (May 16th, 2018)

  4. #3
    New to the CF scene
    Join Date
    May 2018
    Location
    Bournemouth
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wow! Thank you very much.
    One thing though; which part of the code do I need to change if I want the rows (Points Won - Total Points Won) to be a different color of my choice?

  5. #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,312
    Thanks
    3
    Thanked 564 Times in 550 Posts
    Hi there tomhatten,


    Points Won:-

    Code:
    
    .gridtable tr:nth-child( 5n+3 ) td {
        background-color: #fee;
     }
    Total Points Won:-

    Code:
    
    .gridtable tr:nth-child( 5n+4 ) td {
        background-color: #eef;
     }

    coothead
    ~ the original bald headed old fart ~

  6. #5
    New to the CF scene
    Join Date
    May 2018
    Location
    Bournemouth
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It's Ok, coothead, I've figured it out. Thanks again for your help.

  7. #6
    New to the CF scene
    Join Date
    May 2018
    Location
    Bournemouth
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oops, sorry. Missed your post.

  8. #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,312
    Thanks
    3
    Thanked 564 Times in 550 Posts
    Hi there tomhatten,

    there is one possible problem with the code that I gave you.

    I notice that the Thu 4 Jan - Sun 7 Jan code has one tournament and
    Thu 11 Jan - Sun 14 Jan code has two tournaments.

    It would, in that case, be safer to use this code...

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
    body {
        background-color: #f9f9f9;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
    #container {
        padding: 0.5em;
        border: 1px solid #999;
        background-color: #f5ecce; 
     }
    h1 {
        margin: 0 0 1.5em;
        font-size: 1em;
        text-align: center;
        text-decoration: underline;
     }
    .gridtable {
        border: 1px solid #999;
        border-collapse: collapse;
        font-size: 0.8em;;
        color: #333;	
        text-align: center;
     }
    .gridtable col {
        width: 3%;
     }
    .gridtable th, .gridtable td {
        padding: 0.2em;
        border: 1px solid #666;
        background-color: #b5cfd2;
     }
    .gridtable td {
        background-color: #fff;
     }
    .gridtable td:nth-child( 7n+1 ) {
        text-align: left;
     }
    .points-won td {
        background-color: #fee;
     }
    .total-points-won td {
        background-color: #eef;
     }
    </style>
    
    </head>
    <body> 
    
    <div id="container">
    
    <h1>2017/2018 Competition Points Won Table</h1>
    
    <table class="gridtable">
    <colgroup>
            <col span="1">
            <col span="1">
            <col span="1">
            <col span="1">
            <col span="1">
            <col span="1">
            <col span="1">
    </colgroup>
    <tr>
    	<th>Thu 4 Jan - Sun 7 Jan</th>
    	<th>gb</th>
    	<th>GWolf1</th>
    	<th>jkb</th>
    	<th>ManUtdFan34</th>
    	<th>Scouse</th>
    	<th>spurslad</th>
    </tr><tr>
    	<td>Sentry Tournament of Champions</td>
    	<td><!-- gb -->4</td>
    	<td><!-- GWolf1 -->13</td>
    	<td><!-- jkb -->7</td>
    	<td><!-- ManUtdFan34 -->7</td>
    	<td><!-- Scouse -->11</td>
    	<td><!-- spurslad -->11</td>
    </tr><tr class="points-won">
    	<td>Points Won</td>
    	<td><!-- gb -->10</td>
    	<td><!-- GWolf1 -->8</td>
    	<td><!-- jkb -->9</td>
    	<td><!-- ManUtdFan34 -->7</td>
    	<td><!-- Scouse -->13</td>
    	<td><!-- spurslad -->10</td>
    </tr><tr class="total-points-won">
    	<td>Total Points Won</td>
    	<td><!-- gb -->20</td>
    	<td><!-- GWolf1 -->4</td>
    	<td><!-- jkb -->8</td>
    	<td><!-- ManUtdFan34 -->5</td>
    	<td><!-- Scouse -->4</td>
    	<td><!-- spurslad -->3</td>
    </tr><tr>
    	<th>Thu 11 Jan - Sun 14 Jan</th>
    	<th>gb</th>
    	<th>GWolf1</th>
    	<th>jkb</th>
    	<th>ManUtdFan34</th>
    	<th>Scouse</th>
    	<th>spurslad</th>
    </tr><tr>
    	<td>Sony Open</td>
    	<td><!-- gb -->6</td>
    	<td><!-- GWolf1 -->9</td>
    	<td><!-- jkb -->8</td>
    	<td><!-- ManUtdFan34 -->9</td>
    	<td><!-- Scouse -->11</td>
    	<td><!-- spurslad -->7</td>
    </tr><tr>
    	<td>BMW South African Open</td>
    	<td><!-- gb -->4</td>
    	<td><!-- GWolf1 -->4</td>
    	<td><!-- jkb -->8</td>
    	<td><!-- ManUtdFan34 -->5</td>
    	<td><!-- Scouse -->10</td>
    	<td><!-- spurslad -->7</td>
    </tr><tr class="points-won">
    	<td>Points Won</td>
    	<td><!-- gb -->10</td>
    	<td><!-- GWolf1 -->8</td>
    	<td><!-- jkb -->9</td>
    	<td><!-- ManUtdFan34 -->7</td>
    	<td><!-- Scouse -->13</td>
    	<td><!-- spurslad -->10</td>
    </tr><tr class="total-points-won">
    	<td>Total Points Won</td>
    	<td><!-- gb -->20</td>
    	<td><!-- GWolf1 -->4</td>
    	<td><!-- jkb -->8</td>
    	<td><!-- ManUtdFan34 -->5</td>
    	<td><!-- Scouse -->4</td>
    	<td><!-- spurslad -->3</td>
    </tr>
    </table>
    
    </div>
    
    </body>
    </html>

    coothead
    Last edited by coothead; May 16th, 2018 at 11:54 PM.
    ~ the original bald headed old fart ~

  9. #8
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,086
    Thanks
    4
    Thanked 447 Times in 436 Posts
    Uhg, that markup is horrifying... this is 2018 not 1997, there is no such thing as FONT or CENTER and really anything saying what things look like has NO business in your HTML.

    Your first column is clearly the heading FOR that row, we have a tag for that, called TH -- Table heading. Likewise it has an attribute called SCOPE to say which direction (row or column) it applies.

    Likewise the totals are clearly a table footer, and the first row is clearly a table header... there are tags for that TOO. In fact all the playing with nth-child for targeting the footer stuff is a waste if you bothered having the proper semantic markup. In fact looking at this you do NOT even have a single uniform table, you have what should be multiple SEPARATE tables as the date should be a caption FOR the table, and not a heading for that COLUMN. (since it doesn't describe the contents of said column)

    Remember, your HTML is supposed to say what things ARE structurally and grammatically, and NOT what you want them to look like.

    I'm also not sold that the overall total belongs in there for each and every subsection, that should be a separate table AFTER the others if following a normal semantic structure.

    So the first order of business is to drag your HTML kicking and screaming out of the 1990's.

    Code:
    <div class="competitions">
    
    	<!-- H2 on the assumption you have the site title as your structural H1 -->
    	<h2>2017/2018 Competition Points Won Table</h2>
    	
    	<table>
    		<caption>Thu 4 Jan - Sun 7 Jan</caption>
    		<thead>
    			<tr>
    				<th scope="col">Event</th>
    				<th scope="col">gb</th>
    				<th scope="col">GWolf1</th>
    				<th scope="col">jkb</th>
    				<th scope="col">ManUtdFan34</th>
    				<th scope="col">Scouse</th>
    				<th scope="col">spurslad</th>
    			</tr>
    		</thead><tfoot> <!-- might seem wierd, but tfoot goes BEFORE tbody! -->
    			<tr>
    				<th scope="row">Points Won</th>
    				<td>10</td>
    				<td>8</td>
    				<td>9</td>
    				<td>7</td>
    				<td>13</td>
    				<td>10</td>
    			</tr>
    		</tfoot><tbody>
    			<tr>
    				<th scope="row">Sentry Tournament of Champions</th>
    				<td>4</td>
    				<td>13</td>
    				<td>7</td>
    				<td>7</td>
    				<td>11</td>
    				<td>11</td>
    			</tr>
    		</tbody>
    	</table>
    	
    	<table>
    		<caption>Thu 11 Jan - Sun 14 Jan</caption>
    		<thead>
    			<tr>
    				<th scope="col">Event</th>
    				<th scope="col">gb</th>
    				<th scope="col">GWolf1</th>
    				<th scope="col">jkb</th>
    				<th scope="col">ManUtdFan34</th>
    				<th scope="col">Scouse</th>
    				<th scope="col">spurslad</th>
    			</tr>
    		</thead><tfoot>
    			<tr>
    				<th scope="row">Points Won</th>
    				<td>10</td>
    				<td>8</td>
    				<td>9</td>
    				<td>7</td>
    				<td>13</td>
    				<td>10</td>
    			</tr>
    		</tfoot><tbody>
    			<tr>
    				<th scope="row">Sony Open</th>
    				<td>6</td>
    				<td>9</td>
    				<td>8</td>
    				<td>9</td>
    				<td>11</td>
    				<td>7</td>
    			</tr><tr>
    				<th scope="row">BMW South African Open</th>
    				<td>4</td>
    				<td>4</td>
    				<td>8</td>
    				<td>5</td>
    				<td>10</td>
    				<td>7</td>
    			</tr>
    		</tbody>
    	</table>
    	
    	<table>
    		<caption>Overall Results</caption>
    		<thead>
    			<tr>
    				<th></th>
    				<th scope="col">gb</th>
    				<th scope="col">GWolf1</th>
    				<th scope="col">jkb</th>
    				<th scope="col">ManUtdFan34</th>
    				<th scope="col">Scouse</th>
    				<th scope="col">spurslad</th>
    			</tr>
    		</thead><tbody>
    			<tr>
    				<th scope="row">Total Points Won</th>
    				<td>20</td>
    				<td>4</td>
    				<td>8</td>
    				<td>5</td>
    				<td>4</td>
    				<td>3</td>
    			</tr>
    		</tbody>
    	</table>
    	
    <!-- .competitions --></div>
    It's important when working with HTML to know ALL the tags and attributes that go into a table, and what the structural meaning of tabular data IS... you don't just slop it together as one giant table filled with nothing but TD. HTML has MEANINGS that are entirely separate from the default appearance. Using them means less playing around with fancy selectors like nth-child or adding excess 'classes for nothing'.

    To style that it would go something like this:

    Code:
    .competitions {
    	padding:1em;
    	background:#F5ECCE;
    }
    
    .competitions table {
    	width:100%;
    	background:#FFF;
    	border-collapse:collapse;
    	margin-top:1em;
    }
    
    .competitions caption {
    	text-align:left;
    	padding:0.25em 1em;
    	font-weight:bold;
    }
    
    .competitions th,
    .competitions td {
    	text-align:center;
    	padding:0.25em 1em;
    	border:1px solid #000;
    }
    
    .competitions thead th,
    .competitions td {
    	text-align:center;
    }
    
    .competitions thead th:first-child,
    .competitions tfoot th,
    .competitions tbody th {
    	text-align:left;
    }
    
    .competitions tfoot th,
    .competitions tbody th {
    	font-weight:normal;
    }
    
    .competitions tfoot th,
    .competitions tfoot td {
    	background:#EEE;
    }
    
    .competitions td {
    	width:3%;
    }
    
    .competitions thead th {
    	background:#B5CFD2;
    }
    
    
    .competitions tfoot tr:last-child th,
    .competitions tfoot tr:last-child td {
    	font-weight:bold;
    }
    It might not be 100% the appearance you are thinking, but it is semantically and structurally correct. Content dictates markup, content + markup + device capabilities dictates layout, **NOT** the other way around!
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •