Easy HTML underline

Question

I am creating a form in HTML that will be printed, with fields that need to be written in by the recipient. Basically what I want is a single line that stretches from the end of the field label to the side of the page. Here's how I'm doing it right now:

<table width="100%">
    <tr>
        <td width="1%">
            Label:
        </td>
        <td style="border-bottom-style:solid; border-bottom-width:1px;">
            &nbsp;
        </td>
    </tr>
</table>

This works, but there must be an easier way to do this without needing a whole table element. Any ideas?

Answer 1

How about using the span tag?

<span style="border-bottom....">Text</span>

Answer 2

Here's my CSS:

span.print_underline
{
    display: inline-block;
    height: 1em;
    border-bottom: 1px solid #000;
}

So your HTML will look like:

<span class="print_underline" style="width: 200px">&nbsp;</span>

I left the width out, so I could reuse it as much as I want, but you can specify the width.

As a sidenote, I tested the same concept with a div tag instead of span tag, and it did not work in some situations. This is probably because it is semantically incorrect to put a div within a paragraph tag (which is why I used a span), and I generally use paragraph tags instead of using table rows like you've used.

Answer 3

just have a div with appropriate margin to the left. Block-elements by default always expand to the full width.

Meaning:

label {
    float: left;
}

div {
    margin-left: 10em;
    border-bottom: 1px solid black;
    height: 1em;
}

<label>label:</label>

<div></div>

it won't stretch the full width between the label and the right side, but you can have the label hide the bottom-border (using background-color or something) and have the div expand all the way to the right aswell (without the margin).

If you want correct semantics, you can even use an input instead of a div, set it's display to "block" and fix the borders and background.

Answer 4

I think your solution is better than the responses thus far. The only thing I'd change about your solution is that I'd use a css class instead of inline.

Your solution will have better alignment than using spans. Your code will look cleaner with table elements than with spans as well.

Also, you might want to consider putting in a textbox in your cell so that your users can input the information directly on the page before printing out.