Skip to content Skip to sidebar Skip to footer

How to Make HTML Table 2022

But basically you can create a table using only 3 HTML elements.

  • Element
    which is used to define table creation.
  • Element
  • which is usually used to define the creation of rows in a table.
  • Element
  • usually used to wrap content in the title or head of the table.
  • Element
  • used to wrap content in the body or body of a table.
  • Element
  • The same is also used to wrap content at the foot or bottom of a table.

    Instead of you being familiar with these elements, let’s practice directly by using 3 elements that are commonly used in creating tables.

    Please refer to the steps on how to create an html table using elements commonly used to create tables, which are as follows:

    The first step you have to do is create a new html file.

    After that you can give the name for the html file according to your taste or you can give the name “index.html”.

    Please take a look at the sample code below.






    Getting to Know HTML Tables

    usually used to create a column or cell in each row in the table.

    Along with the development and also the need for tables, HTML has also provided other optional elements in creating tables as below.

    • Element
    used to define the headers in the table.
  • Element
  • 1st Row – 1st Column1st Row – 2nd Column
    2nd Row – 1st Column2nd Row – 2nd Column


    In the code above, there is already an attribute or border in the table tag, the attribute or border is used to add a line to the table.

    While the number 1 in the border attribute is the value of the thickness of the line that will be displayed.

    The larger the value, the thicker the line that will be displayed.

    2. How to Create an HTML Table by Merging Cells in an HTML Table

    How to Create an HTML Table
    How to Create an HTML Table by Merging Cells in an HTML Table

    When you do how to create an html table sometimes you will be faced with the need to combine several cells into one.

    To combine several cells into one in a table, html already provides several attributes that you can use for it as below.

    The rewspan attribute is used to join existing rows in the table.

    The colspan attribute is usually used to combine existing columns in a table.

    You can apply these attributes to the td or th tags, please maintain the sample program code that already exists below.






    Getting to Know HTML Tables

    NameScore
    ChemicalPhysicsBiology
    Robby768081
    Rendi847075
    Alfian967071


    In the code above, the rowspan attribute has a value of 2, which means that the combined rows are 2 rows.

    Meanwhile, the colspan attribute has a value of 3, which means that the column to be enlarged is 3 columns.

    The code above can also use the th tag which also functions as the head of the table when the data in the “th” tag has a bold or bold effect compared to the data already in the “td” tag.

    3. How to Create an HTML Table to Add Color and Spacing Between Cells in HTML

    How to Create an HTML Table
    How to Create an HTML Table to Give Color and Spacing Between Cells in HTML

    How to create a third html table, you have entered the stage of giving color and also the distance between cells in html.

    In the previous example program, the resulting table appears close to each other from one cell to another.

    To be able to overcome all that HTML has provided a cellpadding attribute that you can use to adjust the distance between cells.

    You can apply the cellpadding attribute directly to the table tag below.

    ….

    The higher the value in the cellpadding attribute, the wider the distance between the cells and vice versa.

    You can also give a color to the background that is in a cell or table only by using the bgcolor attribute and then fill it with color only.

    For example you will be given a yellow background color for the value and also gray for the name.

    Then you just need to add the bgcolor attribute to the “th” tag as shown below.

    Name

    Score

    After adding the cellpadding attribute to the table tag and also the bgcolor attribute to the th tag, the table above will be displayed.

    4. How to Create an HTML Table by Applying CSS Code for Table Design

    How to Create an HTML Table
    How to Create HTML Tables by Applying CSS Code for Table Design

    The fourth way to create an html table is to apply CSS code to be placed in the table design.

    Previously we have discussed how to create a line and also give color and spacing to the table using attributes in html.

    For now, after the presence of CSS, users of these attributes in designing tables are no longer recommended.

    You will be advised to use CSS code in creating the lines and also giving color and spacing to the table.

    By inserting CSS code on a web page, you can create a separate CSS file or store it in the head element in HTML.

    Try never to save on other HTML elements because it can make the program code look untidy.

    In addition, by storing the css code in a separate file or in the head element, the css code can be used repeatedly.

    CSS code can be written by defining in advance what HTML tags you will change or apply CSS effects to.

    For more details, you can pay attention to the sample program code below.






    Getting to Know HTML Tables


    NameScore
    ChemicalPhysicsBiology
    Robby768081
    Rendi847075
    Alfian967071


    The example program code above already has CSS code, which is where the CSS code is placed in the style element which is stored in the head element.

    The style element serves to indicate that the code that is already in it is the CSS code that is usually used to design web pages.

    Then what are the CSS properties in the program code above for? For that, please refer to the review below regarding CSS properties.

    • The border-collapse: collapse property can be used to collapse table lines into a single line.
    • The border property: 1px solid black is used to define the line, line thickness and color for each line.
    • Padding property: 10px which is used to control the spacing of the content in the table.
    • The background-color: #4CAF50 property is used to give a blue background color to make it look less boring and more interesting.
    • The color: white property is usually used to add white to existing text.

    To make it look even more interesting you can add the CSS width property so that the table can follow the size of the screen.

    The hover property is also used so that the row in the table gives a color effect when the cursor hovers over that row.

    So the CSS code will be like below.

    The final word

    That’s some how to make html table that we can provide for you in this discussion, which of course you can apply easily.

    There are things you should pay attention to when creating a table is the use of the rowspan and cospan attributes.

    Because you have to be careful in determining what size of cells will be applied to rowspan or colspan.

    Practice often and continue to develop your skills by following the decoding academy front end web developer.

    If you think the review we have provided above is important, don’t forget to share it with your friends or relatives who don’t know the information.

    That’s all the discussion that we can provide for you in this article, that’s all and hopefully it’s useful for you and good luck.