How to property adjust table?


Tags: css

Problem :

I have this simple code.

<div class="rating" >
<table>
<tr>
     <th> Award </th>
     <th> Winner </th>
     <th> Runner-up </th>    
</tr>
<tr>
    <td> Starburst Award </td>
    <td> #winner </td>
    <td> #runner-up#</td>
</tr>
<tr>
    <td> Rising Star Award </td>
    <td> #winner </td>
    <td> #runner-up#</td>

</tr>
 <tr>
    <td> Shooting Star Award  </td>
    <td> #winner </td>
    <td> #runner-up#</td>

</tr>   
 <tr>
    <td> Shining Star Award </td>
    <td> #winner......................... </td>
    <td> #runner-up#.....................................</td>

</tr>   
</table>
</div>
table.rating, th,tr,td
{
 width:100%;   
border-collapse:collapse;
    border:1px solid black; height:50px;
    border:1px solid black;
}

Using the css I want to make better. How can I have it that it looks more like a table and not be separated like that, and have the be in the middle? I have created a http://fiddle.jshell.net/9axbx/ , all I really want to do make the table look better.



Solution :

The following code sets it up more like a table:

<div class="rating" >
<table border="1">
<tr>
 <th> Award </th>
 <th> Winner </th>
 <th> Runner-up </th>    
</tr>
<tr>
 <td> Starburst Award </td>
 <td> #winner </td>
 <td> #runner-up#</td>
</tr>
<tr>
 <td> Rising Star Award </td>
 <td> #winner </td>
 <td> #runner-up#</td>

</tr>
<tr>
 <td> Shooting Star Award  </td>
 <td> #winner </td>
 <td> #runner-up#</td>

</tr>   
<tr>
 <td> Shining Star Award </td>
 <td> #winner</td>
 <td> #runner-up#</td>

</tr>   
</table>
</div>
<style type="text/css">
  table.rating, th,tr,td
  {
    width: 30%;
    border-collapse:collapse;
    border:1px solid black; 
    height:50px;
    border:1px solid black;
    text-align: center;
  }
</style>

Here's what it looks like:

enter image description here

I'm not quite sure what you're looking for, but that should be a good start. You really should have the <style></style> tags inside the <head></head> of your html document, but the above still works, for demonstration purposes.

EDIT: Just a note on the changes I made--

I first removed the periods after the text in the last couple of cells. Not quite sure what you put them there for. Second, I added text-align:center to your CSS. If you don't want the text centered, you can change it to, say, text-align:left to align it to the left. Third, You do not need a border, and if you don't want one just remove the border options from the CSS. Finally, I changed the width of your cells to 30%, so they all should be the same width. This makes things much neater and cleaner. 100% makes a cell the full width of the table, which I assume you don't want. If you want a cell to take up more than one column you should use the colspan attribute.


    CSS Howto..

    How to stop CSS cascading or how to target only 2nd child and not 3rd with CSS

    “Pull center” in Bootstrap: A -D- B -E- C columns collapsing to A-B-C // D-E, how to get B between D and E?

    How to set the jquery draggable with margin left?

    How to indent input controls for a nested HTML list using CSS to a single column

    How to set width of container with two div's [closed]

    Captions after 1st slide doesnt show for flexslider

    How to select that has no “type” with CSS

    How to make a layout in which certain tags will fill remaining space of parent tag/container?

    How to Make Certain Phrases Appear on One Line Regardless of Screen Size

    Foundation 5-How to center position the class 'row' regardless the browser size?

    How to change CSS in media tag within @media only tags with jquery?

    How to keep image lumpted with last word in a paragraph

    css menu active sub links to show on parent link

    How to make a child div alone responsive using css?

    How to avoid messing formating up?

    div height is not showing properly

    How to center dropdown menu under parent tab?

    Symfony2 Form Type - how to set form CSS class as attribute?

    Quick beginner CSS, how to “scope” styles?

    How can I use .htaccess to send distant expiry headers on CSS and JS files?

    How to create tabs using Javascript and Jquery

    How do I change the display position from absolute to relative?

    How do a Add scroll bar with fixed header

    CSS/HTML menu not showing correctly

    How to write css for each page in rails 3

    How to auto-adjust size of other input fields while typing into input field #1?

    How to properly align rows with bootstrap

    how to make a text ele to the right of a left floated ele automatically occupy the rest width?

    How to get a working CSS zigzag border?

    How to integrate many CSS files