Dynamic HTML and CSS Table Alignment Techniques

Issue Screenshot:

Is there a way to properly align the right column of the table, particularly the Student NRIC row and School's? 

    .formstyled {
    width:70%;
    margin-left:5%;
    }

    .formstyled input[type=text],input[type=password],textarea,select {
    width:100%;
    padding-left:3px;

    border: 2px solid #dadada;
    border-radius: 5px;

    }

    .formstyled select {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;

    background: url('arrow.png') no-repeat;
    background-position:98% -1px;
    background-color:white;
    }

    .formstyled input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 1px 1px 8px #b2d9f9;
   }

::-webkit-input-placeholder {
    text-align:center;
    font-style:italic;
    font-size:smaller;
    opacity:0.4;
    color: #999;
}

   .formstyled input[type=submit],input[type=reset] {
    width:65px;
    height:25px;

    background: linear-gradient(to bottom, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 32%,rgba(1,1,1,1) 40%,rgba(10,10,10,1) 48%,rgba(78,78,78,1) 77%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* W3C */   

    border:none;
    border-top:1px #219fe8 solid;
    border-bottom:2px #219FE8 solid;
    border-radius:15px;

    cursor:pointer;

    color:#F6F6E8;
    font-family:Raleway;
    font-size:smaller;
    letter-spacing:1px;
   }

In addition, any suggestions on how to enhance the design of the table for my assignment? Feeling a bit stuck on ideas... Well, kind of.

htmlcss

Answer №1

My recommendation would be to opt for a 4 column layout.

The issue seems to lie in the Student NRIC and School rows, as they are not fully utilizing the space within the table column, correct?

The first column should contain your field names.

In the second column (consisting of INPUT and SELECT tags), all columns should span 3 except for Student NRIC. Each part of the Student NRIC should have its own INPUT tag with defined widths for each.

Lastly, create CSS styling that targets your INPUT and SELECT tags, setting their width to 100%.

For a basic illustration/prototype, refer to this sample code: (http://jsfiddle.net/PDVj9/):

    <style>
    INPUT, SELECT {
      width:100%;
    }
    .field-title {
      width:100px;
    }
    </style>

    <table style="width:500px;">
    <tr>
    <td class="field-title">
        Student Name
    </td>
    <td colspan="3">
        <input name="student_name" />
    </td>
    </tr>
        <td class="field-title">
            Student NRIC
        </td>
        <td style="width:200px">
            <input name="student_nric_1" />
        </td>
        <td style="width:50px;">
            <input name="student_nric_2" />
        </td>
        <td style="width:150px;">
            <input name="student_nric_3" />
        </td>
    </tr>
    </table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Listen for the chosen choice

What is the best way to display a chosen option in PHP? I have set up an HTML menu list with options for "Buy" and "Sell". I need to output 'I want to buy the book' if someone selects "buy", or 'I want to sell the book' if someone pick ...

phphtml

Transforming data from PHP JSON format into HTML output

Struggling to convert JSON data into HTML format? Having trouble maintaining the correct order of child elements in your structure? Here's a solution: Take a look at this example JSON: { "tag": "html", "children": [ { "ta ...

phphtmljsondom

How to access elements that are dynamically added using Jquery

Similar Question: dynamic class not triggering jquery unable to select dynamically added element I am facing an issue trying to access a dynamically added element by its class name. Here is a snippet of the HTML code I am working with: <div c ...

jqueryhtml

What are the steps to change table characteristics?

I currently have this segment of HTML code: <table cellspacing="0" cellpadding="0" width="100%"> After validating my HTML document, I discovered that these attributes are outdated. However, removing them would affect the alignment of my website. I ...

htmlcssw3c-validation

I'm encountering issues with this code for a dice game. It's strange that whenever I click the roll dice button, it disappears. Additionally, linking an .css sheet seems to cause the entire page to

I'm currently working with two separate codes: one for HTML and the other for JavaScript. I am facing an issue where the button keeps disappearing when I try to add any CSS styling to it. Even a basic CSS file seems to override everything else and lea ...

javascripthtml

CSS Priority - determining the ultimate winner

I have an upcoming exam and I'm reviewing the previous exam paper that was given to me. The question is: When multiple style sheet rules are applied to the same element, which type of rule takes precedence? a. Any declaration from the browser b. ...

css

Troubleshooting challenges arise with Bootstrap's button group spacing issue

I am encountering spacing issues with the markup provided below. <h2>Profitability Report</h2> <form method="post"> <div class="row"> <div class="col-md-12"> <div class="btn-group btn-group-toggle ...

htmlcsstwitter-bootstrapbootstrap-4

Switch videos within the video tag as you scroll

I am trying to implement a video tag within a div element on my website. Here is the current code: <div class="phone" align="center"> <div class="phone-inner"> <video width="100%" height="100%" autoplay="" loop="" muted id="phonevideo ...

javascriptjqueryhtmlcss

Cross-browser compatibility issues with animated SVG line drawing glow effect

Attempting to create a dazzling animation utilizing SVG filters and the stroke-dasharray technique to produce a gradually drawn "glowing" line effect has posed its challenges. After extensive research, a partially functional solution was crafted: JSFiddle ...

htmlcsssvgglowline-drawing

Discovering whether input field is currently in focus using jQuery

Does anyone know how to determine if an input tag in HTML has focus using jQuery? The keydown event will function for forms when input, image, etc. tags have focus. However, it will not work if the focus is on the form itself but not on any specific tags ...

javascriptjqueryhtml

Avoid flickering of images by properly handling the object URL when setting the image source in an asynchronous pipe

Implementing a JWT authorized endpoint for images has made it impossible to directly link to image urls in HTML. To work around this issue, we have created an async pipe that loads the image with proper authorization (handled by an HTTP interceptor, not s ...

htmlcssangulartypescript

Should the event happen inside a div section

How can I determine if an element is currently positioned within a specific div? I am working on a vertical scrolling menu where the height of the navigation div is set and overflow is hidden to show only a portion of the links at a time. To navigate thr ...

jquerycssscroll

Color the area entirely in black

I am currently working on a project for one of my courses, where I have created a website for a specific service. However, I am facing some challenges and things are not going as smoothly as I had hoped. Here is a screenshot of the page: https://i.stack.im ...

htmlcss

Open $_POST in a new tab that has been edited for your convenience

<form method="post" target="_blank" action="battle.php" onsubmit="window.open('battle.php','','width=700,height=500,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=30,top=0');" > < ...

javascriptphphtmlcss

Blurring the edges of a div container

I have successfully faded the top of a div, but I am struggling to achieve the same effect for the bottom. I attempted to reverse the CSS properties used for fading the top, but it does not seem to be working as expected. HTML: <div class="container-c ...

htmlcsslinear-gradients

Generating a .png image using the data received from the client [node]

I need to create a highchart client-side and save a PNG of that chart server-side. After successfully generating the highchart and converting it to a PNG using the following function: function saveThumbnail(graph_name, chart) { canvg(document.getEleme ...

javascripthtml

An unexpected error has occurred in the browser console: The character '@' is not valid

I recently made the decision to dive into learning about Unit Testing with JavaScript. To aid in this process, I started using both Mocha.js and Chai.js frameworks. I downloaded the latest versions of these frameworks onto my index.html from cdnjs.com. How ...

javascriptcssunit-testingbrowsersyntax-error

Ways to dynamically assign a class to a single element within a group of identical elements

I have three identical items in the DOM. Specifically, I am referring to a moving line <span class="caret"></span> <ul> <li class="nav-item-1"> <a href="#">ITEM 1</a> <span class="caret"></span> ...

javascriptjqueryhtmlcss

Tips for automatically displaying the scroll bar continuously on iOS 15 without requiring user interaction

We have a Web Application that displays a scroll bar for users to navigate through the content. The scroll bar functions correctly on desktop browsers and Android browsers, but not on Apple devices running iOS 15 (Safari Browser). Current Behavior : In ...

htmlcssiosreactjsscrollbar

Flexbox or Bootstrap 4 Grid: Which is the Better Choice?

My form is structured as follows: <div class="row"> <div class="col"> <textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea> </div> <div clas ...

htmlcsstwitter-bootstrapbootstrap-4