Table Components
Photo By Jackson Sophat on Unsplash
The Table Component is often used to create a list of data, such as Student Data, College Student Data, Employee Data, and so on. Therefore, table elements are commonly found and are essential for us to master in order to create them properly.
| Gel. | SPP | Reguler | karyawan | International Program | ||
|---|---|---|---|---|---|---|
| Diploma (D3) | Sarjana (S1) | Diploma (D3) | Sarjana (S1) | |||
| I | Rp 800.000,- | Rp 1.920.000,- (Per Semester) |
Rp 2.280.000,- (Per Semester) |
Rp 2.420.000,- (Per Semester) |
Rp 2.780.000,- (Per Semester) |
USD 1.600,-/Semester *Jaminan Kuliah + Magang di Inggris dan Singapore |
| II | Rp 1.200.000,- | |||||
| III | Rp 1.700.000,- | |||||
| IV | Rp 2.200.000,- | |||||
To create a table like the example above, please refer to the explanation below.
- A table begins with the <table> tag.
- A table consists of a table head and a table body. The header is used to specify the column names, while the **body** is used to fill in the data.
- To create a table header, use the structure <thead><tr><td> or <tr><th>. To create the table body, use <tbody><tr><td> or just <tr> <td>.
- Each row in a table begins with the <tr> tag.
- The number of columns in each row must be the same and is defined using the <td> tag.
- Merging cells can be done in two ways:
- Merge rows using rowspan=”n”
- Merge columns using colspan=”n”
- “n” = the number of cells you want to merge.
- Tables have special attributes like width, border, cellpadding, cellspacing, etc.
Example of a Simple Table
Example of a Table with Row and Column Merging
Notes
- Every row, even in the middle of the table, is considered a new row and starts with the <tr> tag.
- To create a table with multiple merged cells and rows, first count the number of columns, then create the <td> tags.
- If a column needs to merge rows, use rowspan=”(adjust to the number of rows)”.
- To merge columns, use colspan=”(adjust to the number of columns)”.
Example of a Table with Different Row Colors,
That’s the explanation about creating tables in HTML. Hopefully, this is useful for all of us.
This is the article that Mangcoding can share. Hopefully, it is beneficial and provides new knowledge for you. If you have constructive criticism or suggestions, please leave a comment or send them via Mangcoding’s Email and Social Media.
Keep Learning! Stay Motivated! 😊