CODEWITHSUNDEEP
htmlcssasp.net
BobSki
BobSki

Reputation: 1552

indentation in a web document <td></td>

I'm working on a form in my application and trying to clean up the code that was put in place before me. HEre's something I'm coming across that seems like bad practice and I am having a hard time trying to abbreviate it and clean it up.

Here's the code...

<tr>
<td style="padding-top: 10px; padding-bottom: 10px;">
   <table border="0" cellpadding="0" cellspacing="0" width="100%">
       <tr>
          <td width="6%"></td> <---- I want to get rid of this!
          <td width="45%">
             <asp:CheckBox ID="chkBHRAExpiresDischarge" runat="server" onclick="RadioControl(this);" Text="Upon my discharge from treatment" />
          </td>
          <td>
             <asp:CheckBox ID="chkBHRAExpiresReceiptOfInfo" runat="server" onclick="RadioControl(this);" Text="Upon receipt of the requested information" />
           </td>
       </tr>
       <tr>
       <td></td> <------- Have to keep adding this for every checkBox
          <asp:Checkbox ID=.............."
       </tr>

So what I'm trying to get rid of the the initial indentation, mainly ....

 <td width="6%"></td>

Because this is in place, i have to do a 

<td></td>

before every single row otherwise the indentation dissapears. Is there any way to fix this so that all my checkboxes are indented?

Upvotes: 1

Views: 383

Answers (2)

Peter B
Peter B

Reputation: 24147

Not sure if you'll find this acceptable, but you could keep the <td width="6%"></td> and give it a huge rowspan value. So like this:

<td width="6%" rowspan="999999"></td>

Then you can omit the empty <td></td> for the first 999999 rows. Most likely you have fewer rows than that; or if not, just make the rowspan even higher. The table will not become longer just because of the huge rowspan value.

Of course this all breaks down if you also have rows where the indent should not be applied; a fix for that could be to calculate the exact rowspan value in advance.

Upvotes: 1

Becca
Becca

Reputation: 1580

You can use colspan="2" on the checkbox cells and put padding-left: 6% as a style. Here's a JS fiddle. I added a row above your first row to show the column spacing, modified the first row use this change, and left the second row intact.

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr><td>One</td><td>Two</td><td>Three</td></tr>
    <tr>
        <td width="45%" colspan="2" style="padding-left: 6%">
             <input type="checkbox" /><label>Checkbox</label>
        </td>
        <td>
            <input type="checkbox" /><label>Checkbox</label>
       </td>
   </tr>
   <tr>
        <td width="6%"></td> <!---- I want to get rid of this! -->
        <td width="45%">
             <input type="checkbox" /><label>Checkbox</label>
        </td>
        <td>
            <input type="checkbox" /><label>Checkbox</label>
       </td>
   </tr>
</table>

edit: Also, I recommend validating your HTML. You can wrap your code snippet up with a doctype and the other necessary items to get identify errors and warnings at https://validator.w3.org.

<!DOCTYPE html><html><head><title>Title is Required!</title></head><body>

    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr><td>One</td><td>Two</td><td>Three</td></tr>
        <tr>
            <td width="45%" colspan="2" style="padding-left: 6%">
                 <input type="checkbox" /><label>Checkbox</label>
            </td>
            <td>
                <input type="checkbox" /><label>Checkbox</label>
           </td>
       </tr>
       <tr>
            <td width="6%"></td> <!---- I want to get rid of this! -->
            <td width="45%">
                 <input type="checkbox" /><label>Checkbox</label>
            </td>
            <td>
                <input type="checkbox" /><label>Checkbox</label>
           </td>
       </tr>
    </table>

</body><html>

Upvotes: 1

Related Questions