Question

I create the table like this.

<table border="1">
            <tr>
                <td width="250px" rowspan="2"><input type="image" src="dash.jpg"  name="image" style=width:50% height="100"> </td>
                <td width="1100px" align="center" valign ="top"><div id="head1" style="font-size: 55px;letter-spacing:3px">Sample programming html</div></td>
                <td width="300px" align="center" valign ="top"><span id="subhead1" style="font-size: 25px;letter-spacing:3px">Chap: <label id = "l1"  style = "color:white;font:normal 22px chalkdust;">1</label></span><br>
                    <span id="subhead2" style="font-size: 30px;letter-spacing:3px"> <input type="text" id="text2" disabled="disabled" value="0" style= "color: #fff; font-size: 18pt;"/> -  POINT</span>
                </td>
            </tr>
            <tr>
                <td  colspan="3" align="center" style="position: relative;" valign ="top">
                    <div id="head2" style="font-size: 25px;letter-spacing:4px">1-COORDINATE GRID</div></td>
            </tr>
            <tr><td colspan="3" align="center"><hr id="line" color="#fff" size="2" width="75%"></td></tr>
        </table> 

I want the content “Sample programming html” in center and the “1-COORDINATE GRID” is exactly center to that of the content. I use various code but it not allign exactly to the center of the “Sample programming html”. Can anybody help this to fix the problem.

Answer 1

your td cells are differnt width ,if you want adjust the text alignment yourself you might use
left or right padding css property.

<div id="head2" style="padding-left:250px..../>