CARA MEMBUAT TABEL MEMAKAI KODING HTML(Tutorial create table using html coding)

Tutorial create table using html coding

The table consists of 4 main elements:

1. Lines

2. Column

3. Cell

4.lines

Then, how do you create tables in HTML?

We can create it with several tags that are provided in HTML.

Tags for Creating Tables in HTML

There are a few tags to remember when creating tables in HTML:

1. <table> tag to wrap the table

2. <thead> tag to wrap the header of the table

3. <tbody> tag to wrap the body of the table

4. <tr> tag (table row) to create a row

5. <td> tag (table data) to create cells

6. Tag <th> (table head) to create a title in the header

The most important tags to remember are the <table>, <tr>, and <td> tags. While other tags are optional (optional), they may or may not be used.

Let's take a look at an example:

The result:

In order for the table to have lines, please add attribute border = "1" inside the <table> tag.

So it will be like this:

The value "1" in the border attribute is the size of the line. The bigger the size, the bigger the line size will be.

The value "1" is the smallest line size.

The result will be like this:

Adjusting Cell Spacing with Cellpadding

The cellpadding attribute is an attribute for adjusting the distance between the text and the line in the cell.

We can give this attribute to the <table> tag.

Example:

The value "10" in the cellpadding attribute is a measure of the distance between the cell text and the line.

Then the result:

Adding Color to Cells and Rows

To add color to cells and rows, we can add the bgcolor attribute inside the <td> (for cells) or <tr> (for rows) tags.

example:

We can fill in the bgcolor attribute value with a color code in hexadecimal or the color name in English.

Then the result will be like this:

Merging Table Cells

The attributes used to concatenate table cells are rowspan and colspan:

• rowspan to combine rows;

• colspan to join columns.

We can give this attribute to the <td> or <th> tag.

Let's take a look at an example:

The result:

Inserting Another Element into the Cell

In the <td> and <th> cells, we can insert other HTML elements, such as images, links, videos, lists, etc.

Example:

The result: