CODEWITHSUNDEEP
htmlcsshtml-table
HEEN
HEEN

Reputation: 4721

HTML is not aligning on the right side of the table

I want to copy the HTML table part into the Right side of the form. But when I add the td's it gets dealigned.

Here is my HTML

<table cellpadding="0" cellspacing="0" width="100%">
    <tr style="width: 50%">
        <td class="label" style="font-family: Courier New; width: 10%; text-align: left;
            font-size: 120%;">
            Aggregate Name:
        </td>
        <td class="field" style="text-align: left;">
            <asp:TextBox ID="txtAggrName" runat="server" Width="20%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="font-family: Courier New; width: 10%; text-align: left;
            font-size: 120%;">
            Confirm Party:
        </td>
        <td class="field" style="text-align: left;">
            <asp:TextBox ID="txtConfirmParty1" runat="server" Width="20%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="font-family: Courier New; width: 10%; text-align: left;
            font-size: 120%;">
            Agreement Amt Payable
        </td>
        <td class="field" style="text-align: left;">
            <asp:TextBox ID="txtAgreAmtPay" runat="server" Width="20%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="font-family: Courier New; width: 10%; text-align: left;
            font-size: 120%;">
            Land Agrregate Payable
        </td>
        <td class="field" style="text-align: left;">
            <asp:TextBox ID="txtlandAggPay" runat="server" Width="20%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="font-family: Courier New; width: 10%; text-align: left;
            font-size: 120%;">
            Confirm Party
        </td>
        <td class="field" style="text-align: left;">
            <asp:TextBox ID="txtConfirmParty2" runat="server" Width="20%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="font-family: Courier New; width: 10%; text-align: left;
            font-size: 120%;">
            Total Land Value
        </td>
        <td class="field" style="text-align: left;">
            <asp:TextBox ID="txtLandValue" runat="server" Width="20%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="font-family: Courier New; width: 10%; text-align: left;
            font-size: 120%;">
            Stamp Duty
        </td>
        <td class="field" style="text-align: left;">
            <asp:TextBox ID="txtStampDuty" runat="server" Width="20%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="font-family: Courier New; width: 10%; text-align: left;
            font-size: 120%;">
            Registration Fees
        </td>
        <td class="field" style="text-align: left;">
            <asp:TextBox ID="txtRegisFees" runat="server" Width="20%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="font-family: Courier New; width: 10%; text-align: left;
            font-size: 120%;">
            Legal Fees
        </td>
        <td class="field" style="text-align: left;">
            <asp:TextBox ID="txtLegalFees" runat="server" Width="20%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="font-family: Courier New; width: 10%; text-align: left;
            font-size: 120%;">
            Other Expenses
        </td>
        <td class="field" style="text-align: left;">
            <asp:TextBox ID="txtOthExp" runat="server" Width="20%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="font-family: Courier New; width: 10%; text-align: left;
            font-size: 120%;">
            Total =
        </td>
        <td class="field" style="text-align: left;">
            <asp:TextBox ID="txtTotal" runat="server" Width="20%"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td class="label" style="font-family: Courier New; width: 10%; text-align: left;
            font-size: 120%;">
            Grand Total =
        </td>
        <td class="field" style="text-align: left;">
            <asp:TextBox ID="txtGrandTotal" runat="server" Width="20%"></asp:TextBox>
        </td>
    </tr>
</table>

Below is the screenshot as what it looks like

HTML part

Upvotes: 2

Views: 285

Answers (2)

vivekkupadhyay
vivekkupadhyay

Reputation: 2891

Here I have created a JSFiddle for your desired structure.
And for a better view and a valid HTML as per your requirements you need to follow DOM as:

<table cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td class="label" style="font-family: Courier New; text-align: left;
        font-size: 120%; width: 20%; ">
            Aggregate Name:
        </td>
        <td class="field" style="text-align: left; width: 30%;">
            <input type="text" style="width: 90%" />
        </td>
        <td class="label" style="font-family: Courier New; text-align: left;
        font-size: 120%; width: 20%; ">
            Aggregate Name:
        </td>
        <td class="field" style="text-align: left; width: 30%;">
            <input type="text" style="width: 90%" />
        </td>
    </tr>
   ...

Upvotes: 3

Zubair Farooq
Zubair Farooq

Reputation: 102

Put your whole table in div with ID and resize it's width to 50% then move your div to right by CSS tag: Here is example:

    table-right{
width: 500px;
margin-left: 400px;
}

Upvotes: 0

Related Questions