CODEWITHSUNDEEP
htmlcss
optional
optional

Reputation: 283

HTML/CSS: Tables: width not working

Having (as usual) trouble understanding HTML and CSS:

I got a table: 

<table style="height:200px;width:120px; border-style:solid;">
    <tr>
        <td><img src=IMAGELINK" style="height:120px;width:120px;"/></td>
    </tr>
    <tr>
        <td><b> NAME </b> </td>
    </tr>
    <tr>
        <td> <b> PRICE:- </b> </td>
    </tr>
    <tr>
            <td>
            <a style=
                "
                width:50%;
                padding:1px;
                border-style:solid;
                border-width:1px;
                border-color: #eee0000;
                background-color:#eee000;
                text-decoration:none;
                color:black;"
                href="LINK"> buy 
            </a>
            <a style=
                   "
                width:50%;
                padding:1px;
                border-style:solid;
                border-width:1px;
                border-color: #eee0000;
                background-color:#eee000;
                text-decoration:none;
                color:black;"
                href="LINK"> read 
            </a>

        </td>
    </tr>
</table>

And here's how it looks: enter image description here

As you can see, the two buy/read buttons are quite small and for some reason they're only taking up half the space of the row. I've tried a whole bunch of different things to get the two buttons to take up the whole row...

Upvotes: 1

Views: 160

Answers (3)

Satwik Nadkarny
Satwik Nadkarny

Reputation: 5135

Its never a good idea to write inline CSS. This is considered as bad practice. Understand that html is only used for representation of information. How exactly it should look/appear is something that is handled by CSS. Since they perform different functions, they must be kept seperate. This is called 'Seperation of concerns'.

So I would suggest you to edit your code so as to keep them seperate.

So you can have your HTML as this:

<table style="height:200px;width:120px; border-style:solid;">
    <tr>
        <td>
            <img src="#/>
        </td>
    </tr>
    <tr>
        <td><span>NAME</span>
        </td>
    </tr>
    <tr>
        <td><span>PRICE:-</span>
        </td>
    </tr>
    <tr>
        <td> <div><a href="#"> Buy</a></div> 
 <div> <a href="#"> Read </a></div> 

        </td>
    </tr>
</table>

And your CSS as this:

td > img {
    height:120px;
    width:120px;
}
td > span {
    font-weight:bold;
}

td > div {
    width: 48%;
    display:inline-block;
}

div > a {
    width:100%;
    margin:0 1px;
    border-style:solid;
    border-width:1px;
    border-color: #eee0000;
    background-color:#eee000;
    text-decoration:none;
    color:black;
    display:inline-block;
    text-align:center;
}

This will give you what you are looking for.

See that here: http://jsfiddle.net/9HxW5/

Hope this helps!!!

Upvotes: 1

Lies
Lies

Reputation: 514

Personally I think it is not a good idea to apply formatting to the <a href=""> code.

I adjusted your code so the buttons fill the space by putting them in <div>'s and setting float:left and float:right. Also don't use 50% for the width because there is some padding and margins active.

http://jsfiddle.net/tK9Vg/

<table style="height:200px;width:120px; border-style:solid;">
<tr>
    <td><img src=IMAGELINK" style="height:120px;width:120px;"/></td>
</tr>
<tr>
    <td><b> NAME </b> </td>
</tr>
<tr>
    <td> <b> PRICE:- </b> </td>
</tr>
<tr>
        <td>
        <a href="LINK"><div style=
            "
            width:46%;
            float:left;
            padding:1px;
            border-style:solid;
            border-width:1px;
            border-color: #eee0000;
            background-color:#eee000;
            text-decoration:none;
            color:black;
            "
            > buy </div>
        </a>
        <a href="LINK"><div style=
               "
            width:46%;
            float:right;
            padding:1px;
            border-style:solid;
            border-width:1px;
            border-color: #eee0000;
            background-color:#eee000;
            text-decoration:none;
            color:black;
            "
            > read </div>
        </a>
    </td>
</tr>
</table>

Upvotes: 2

falcon
falcon

Reputation: 357

Maybe you could use colspan attribute for table cells http://jsfiddle.net/zKW3z/1/

Upvotes: 4

Related Questions