Formatted asp page - Form

Malam Malam 226 Reputation points
2022-02-16T14:12:25.963+00:00

I would like to create a page like the one attached; tried it different ways using css but still not been able to get it to render it correctly.
How do I do it to display like this?

174909-form.png

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,460 questions
0 comments No comments
{count} votes

6 answers

Sort by: Most helpful
  1. AgaveJoe 28,056 Reputation points
    2022-02-16T15:37:08.257+00:00

    It is helpful if you provide what you've tried.

        <style>
            #MyTable {
                width: 60%;
            }
    
            #MyTable td.bottomBorder {
                border-bottom: 1px solid black;
            }
    
            #MyTable td.nowrap {
                white-space: nowrap;
                width: 10%;
            }
    
            #MyTable td {
                line-height: 2em;
            }
        </style>
    

    Simple table

        <table id="MyTable">
            <tr>
                <td class="nowrap">First Name:</td>
                <td class="bottomBorder"></td>
                <td class="nowrap">Last Name:</td>
                <td class="bottomBorder"></td>
            </tr>
            <tr>
                <td>Address:</td>
                <td class="bottomBorder" colspan="3"></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td class="bottomBorder" colspan="3"></td>
            </tr>
            <tr>
                <td>City:</td>
                <td class="bottomBorder" colspan="3"></td>
            </tr>
            <tr>
                <td>Notes:</td>
                <td class="bottomBorder" colspan="3"></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td class="bottomBorder" colspan="3"></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td class="bottomBorder" colspan="3"></td>
            </tr>
        </table>
    

  2. Malam Malam 226 Reputation points
    2022-02-16T15:50:00.873+00:00

    Thank you so much!

    0 comments No comments

  3. Malam Malam 226 Reputation points
    2022-02-16T16:10:53.427+00:00

    I need to be able to enter information in these fields.

    0 comments No comments

  4. AgaveJoe 28,056 Reputation points
    2022-02-16T18:37:55.137+00:00

    I need to be able to enter information in these fields.

    Use standard inputs and remove the input borders using CSS. I don't know of any styling that can produce the double and triple lines in your example. But there is nothing stopping you from looking around on the internet.

    0 comments No comments

  5. Malam Malam 226 Reputation points
    2022-02-16T18:44:14.74+00:00

    When I use standard input like textbox or input box then I don't get the nicely formatted aligned screen
    The double and triple lines can be replaced with Textbox controls but, again, I don't get the format I am looking for.


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.