Table, TR, TD, TH – Inserting Tables Into The HTML Code

HTML tablesIf we want to put a table on a website we are building, we have to define it in the HTML code, inserting the tags needed to create the structure of the table. We can modify the look and layout of the table using different attributes. We are going to talk about these attributes in this article, while also providing editable examples. 

Using HTML tables, we can organize texts, numbers, pictures, and links into rows, columns, and cells.

We can create tables using the <table> tag. To add rows, we need to use <tr> tags, while cells can be added with the <td> tag (the name of these tags are short for table row and table data). The content of cells—the actual data—has to be placed between <td> tags.

Headings are important to create readable tables. We can create them using <th> tags, making the content of cells as headings instead of data—the text in these cells will be bold.

By default, the content placed between <td> tags is aligned to the left, while headings are centered.

Caption – The Title of The HTML Table

You can create a description or title for your table using the <caption> tag—the text will appear above the table. Captions or titles have to be placed after the <table> tag, but before the first <tr> tag.

Table Border – The Border of The Table

The information about the table’s border is written in the code as the border attribute of the <table> tag. If we want to see the border lines, we can use border = “1”, “2” etc. depending on how thick we would like the lines to be.

Cellpadding, Cellspacing – Spacing of Cells

A table’s layout doesn’t have to be the default one. We can increase the space between cells, or the space between the content and the border of the cells to make the table easier to read using the cellpadding and cellspacing attributes. These also need to be placed inside the <table> tag.

Width and Height – Scaling Tables

We can also set the width and height of tables using the width and height attributes. The value can be defined in pixels or in percentages relative to the size of the whole screen. 

Colspan and Rowspan – Merging Rows or Columns

To merge rows or columns, you have to use the colspan (for columns) and rowspan (for rows) attributes inside the <td> tags, before the actual content of the cells. We can define how many cells we want to merge with the value that comes after that attribute.

Color Settings of Tables

Bordercolor – The Color of The Table’s Border

The color of border lines can be set using the bordercolor attribute. We can define the color we want with color names or color codes. You can read more about this in our article titled HTML color codes.

Bgcolor – The Background Color of Tables

You can define the background color of cells, or even the whole table using the bgcolor attribute. In this case, we also use color codes or color names to define colors.

We hope you’ve found the information you were looking for to be able to create readable and spectacular tables. We would like to encourage you to click on the editing interface and try different settings. Define new sizes and colors, and change the table in any way you like. Try finding the codes of your favourite colors. This way, you can practice what you’ve read—it will help you strengthen your knowledge and will help you learn how to create tables.

In our Programming Tutorials series you’ll find useful materials which will help you improve your programming skills and speed up the learning process.

Would you like to learn how to code, online? Come and try our first 25 lessons for free at the CodeBerry Programming School.