Creating Table and Form with HTML

     In the previous lesson (Building Profile Page with HTML) I already created table and form inside my profile page. Though in this lesson I will expand the premise about table and form in HTML since i haven't explained it thoroughly. 

Table

    In HTML,  tag for table is table itself. So, in order to create a table, we need to wrap teh content inside tabel tag. 

  • The tag is like this: <table></table>

    Inside the table tag, we commonly use Table Row, Table Header Cell, and Table Data Cell. Table row stands for whatever the content insid the table row will packed by row. For header cell, as the name itself, header cell stands for header in the cell and by default, text inside header cell is bold and center-aligned. Lastly, table data cell defines regular cell in table and it goes with actual data.

Below, these are tags for Table Row, Table Header Cell, and Table Data Cell.

  • Table Row: <tr></tr>
  • Table Header Cell: <th></th>
  • Table Data Cell: <td></td>
I already implemented it to build  university students' table, these are the result and code implementation.





    I give rowspan = 2 to make a room for UTS and EAS header. Moreover, I give colspan = 2 in "Nilai" cell because the column we need to make for UTS and EAS cells is two. If there's more cells that we want to make below the "Nilai" cell, we can change the colspan based on the cell amount.

Form

    In form, we are able to use every tag we want inside the form tag. But this  is the tags that i opted to create a registration form.
  • Label: <label></label>
  • Input: <input></input>
  • select: <select></select>
    So, commonly in form registration, there's a labeled input to show the purpose of the input. It's like a exact unity between label and input, commonly if there's an input, you should put the label as well. 

    Then, there's an input. As i said before, an input should have a purpose. For instance, we specified type="email" in input tag for email input. So basically input is storing the user data (the data depends on the purpose of the input).

    Lastly, there's select. It is likely the same with input, we store the user input value but with select, user cannot specify the input. The input is being specified by the developer. Inside select tag, there will always input options for the user to choose. We can use it with <option></option> tag.

Below, these are the result and code implementation.



You check the full code through my github: https://github.com/farrasnazhif/table-and-form-html.git

Comments

Popular posts from this blog

Typewriting Speed for Coders

Building Profile Page with HTML

Learning by Doing: Web Development Course Landing Page