wordpress good looking table (in html)

Discussion in 'Programming' started by todachange, Apr 4, 2014.

  1. #1
    Hi everyone.

    ive got one question.

    How do i change the background color of the row in the table? only one row.

    I want to change the color of the first row in the table. something like this
    http://imgur.com/S7z2B6n


    Right now It looks like this:
    http://imgur.com/2WaeO03
     
    Solved! View solution.
    todachange, Apr 4, 2014 IP
  2. ShinoRex

    ShinoRex Well-Known Member

    Messages:
    227
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    148
    #2
    You can assign some classes to the row and style it using CSS styles
     
    ShinoRex, Apr 4, 2014 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Or, if you want to add different colors for every other row (even/odd) you can look at the CSS-rules for that - something akin to
    
    tr:nth-child(even) {
       background: #333;
    }
    tr:nth-child(odd) {
       background: #777;
    }
    
    Code (markup):
     
    PoPSiCLe, Apr 4, 2014 IP
  4. hariharan.s

    hariharan.s Member

    Messages:
    53
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #4
    it can done also using style element
    <html>
    <head>
    
    
    </head>
    <body><table border=1 style="border:thin;border-collapse:collapse; font-size:24px">
    <tr style="background-color:green;text-align:center"><th>Firstname</th><th>lastname</th><th>points</th></tr><tr style="background-color:orange"><td>Jill</td><td>smith</td><td>50</td></tr>
    <tr style="background-color:green"><td>michael</td>
    <td>john</td><td>100</td></tr>
    
    <tr style="background-color:orange"><td>michael</td>
    <td>john</td><td>100</td></tr>
    
    <tr style="background-color:green"><td>michael</td>
    <td>john</td><td>100</td></tr>
    
    
    </table>
    </body>
    </html>
    Code (markup):
     
    hariharan.s, Apr 7, 2014 IP
  5. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #5
    Are you retarded? Why in the world would you do inline-styling of a table?
    First, a table might have a lot of different lengths, based on content - where you get the content from, whether or not it's always the same content, or can vary in amount of rows, etc. If you style this hardcoded, there's no way you can do this unless you know exactly how much data you have at all instances.
    Second, why would you do yourself such a disfavor, when my very simple, strictly speaking two-line solution does exactly the same, regardless of the length of the table?
     
    PoPSiCLe, Apr 12, 2014 IP
  6. todachange

    todachange Greenhorn

    Messages:
    71
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    23
    #6
    THank you! :)

    Thank you too for the comment. Ive got one more question. where should I add these codes in the wordpress?
    P.s. sorry for the silly question. Im a newbie.
     
    todachange, Apr 13, 2014 IP
  7. todachange

    todachange Greenhorn

    Messages:
    71
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    23
    #7
    I am making a website about bodybuildig. so what i want is to make this kind of table about exercises, sets and rep goals etc. very simpe and clean table. something like this: http://www.muscleandstrength.com/workouts/himl-4-maximum-muscle-building-workout-system.html you can scroll down to see the table.
    is it possible for you to help me make this kind of table?
    I dont really want those table creating plug ins. i wanna insert some code in the new post section in wordpress.
     
    Last edited: Apr 13, 2014
    todachange, Apr 13, 2014 IP
  8. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #8
    You put them in the style.css - use the built-in editor in Wordpress, if you have to, and just add those values at the bottom, changing the colors as you would like them.
     
    PoPSiCLe, Apr 13, 2014 IP
  9. #9
    That is quite simple, all depending on what you need, but to exemplify, the first table on that page:
    
    <table> // add a class (maybe) if you want multiple tables on the same page, and different tables for other pages, for instance
      <thead> //this is the header - it should normally hold names for each column, but the table we're constructing uses a slightly less straight-forward construct
        <tr>
          <th colspan="3">Week 1 - Chest, Biceps and Abs Workout</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="3">Chest</td>
        </tr>
        <tr class="subheading">
          <td>Exercise</td>
          <td>Sets</td>
          <td>Rep Goal</td>
        </tr>
        <tr>
          <td>Bench Press</td>
          <td>4</td>
          <td>5-7</td>
        </tr>
        <tr>
          <td>Incline Dumbbell Bench Press</td>
          <td>4</td>
          <td>5-7</td>
        </tr>
        <tr>
          <td>Hammer Strength Bench Press</td>
          <td>4</td>
          <td>5-7</td>
        </tr>
        <tr>
          <td colspan="3">Biceps</td>
        </tr>
        <tr class="subheading">
          <td>Exercise</td>
          <td>Sets</td>
          <td>Rep Goal</td>
        </tr>
        <tr>
          <td>Standing Barbell Curl</td>
          <td>4</td>
          <td>5-7</td>
        </tr>
        <tr>
          <td>Seated Dumbbell Curl<td>
          <td>4</td>
          <td>5-7</td>
        </tr>
    </tbody>
    </table>
    
    Code (markup):
    and then you need to add some CSS to deliver the look of the table, of course, something like:
    
    table {
       width: 700px;
       border-collapse: collapse;
    }
    thead th {
       background: blue;
       color: white;
    }
    .subheading {
       font-weight: bold;
    }
    
    Code (markup):
    You might have to do more than this, of course, depending on what you want to achieve when it comes to looks.
     
    PoPSiCLe, Apr 13, 2014 IP