Marksheet design sample in html code responsive one



Designing a responsive student marksheet code with html and css which allows us to maintain alignment of the code without breaking into parts, depending on the screen sizes.


The code is going to contain a responsive top navigation bar along with the student marksheet code. Going with percentage and view width and height instead of going with pixels or centimetres or any other lengths gives us a responsive student marksheet design. Let's assume the marksheet table has to be on the centre of the page with 50 percent of the screen's size. If it's a fixed screen then we can go with a fixed value for this we will go with 50% this will automatically assign the table size to 50 percent of the screen's size.


Here I am going with the register number as a primary key to fetch data from the database. You also can use a composite primary key using multiple columns to form a primary key something like register number + data of birth. For that we need a textbox and button to get the register number from the user. Once the button is triggered the given register will be checked with the database to show the student's mark.


Once the get marks button is clicked the form's action attribute added to the url to submit the form. Here the input box is restricted which allows only numbers with the length of 9.


Here I am going to use two tables, one is to show the student details and another one is to show the student's marks. Aligning text to the centre of the page along with the table by setting width and height to auto. Theme of the marksheet table is done with the help of multiple ids or tags.

Code





0 Comments