How to create a table and import the image in HTML

Programming has a wide world and programmers are people who are very interested in learning everything that is related to programming, there are many programming languages, and each of them has different features, so it takes a lot of time to learn, first we need to remind you that the best way to learn the features that exist in every language, it is to learn all the points through the examples given in the explanation of each feature as well as working hard to be able to do the relevant coding yourself, among the various programming languages ​​that exist, we can mention HTML, which, as you know, has many fans among programmers, and they prefer to use it in order to achieve their goals.

In the continuation of this article, we are going to mention information about two of the most important features available in this language, but before that, it is necessary to give a general explanation about this language, so that you can understand the main points as good as possible in the rest of the article.

What is programming?

In general, programming is the science of solving problems with the help of computer, in which there are many experts who work with high level of knowledge in this field, in other words,

computer programming

is the process of

designing and building a computer executable program

to perform a specific computational result or task, there are various tools in order to help you do this, among which we can mention programming languages, in which there is a lot of variety, and one of the most popular programming languages ​​is HTML, which we are going to discuss in the following.

What is HTML?

HTML stands for Hyper Text Markup Language and gives the browser information about how to display content, as a result, it can accurately represent the goals of the site owner, simply put, it consists of a series of elements that ultimately describe the structure of a web page, HTML elements are able to label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc., in this language, as you know, there are various possibilities, which we are going to explain one of which that is in connection with creating a table and importing the image in html.

Creating a table in HTML:

One of the features of this language, which is very useful, is to create different tables with the help of which programmers are able to organize the data in rows and columns, note the following terms.

- tr tag:

This tag is used to define each row of the table.

-  th tag:

The th tag is used to define each table header.

- td tag:

Each data / table cell is defined with a td tag.

The td elements are the contents of the table data, they can include a variety of HTML elements such as text, images, lists, other tables and so on, there are many tips for creating tables that can be added to the attractiveness of existing tables by learning and mastering them, which we are going to discuss in the following, now the following example for better understanding.

The result of the above example will be as follows.

Basic HTML Table

Firstname Lastname Age-Jill Smith 50 Eve Jackson 94 John Doe 80

Add a Border:

In order to add a border to your table you have to use the CSS border property, now consider the example.

The result of the example which have been mentioned above is as follows.

Table With Border

Use the CSS border property to add a border to the table.

Firstname Lastname Age Jill Smith 50 Eve Jackson 94 John Doe 80

Collapsed Borders:

Another feature that can be added to a table is this item, in order to understand this part as good as possible, it is better to consider the following example.

The result of the above example will be as follows.

Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property.

Firstname Lastname Age Jill Smith 50 Eve Jackson 94 John Doe 80

Add Cell Padding:

By using this feature, you can determine the amount of space between the cell content and its borders, you have to use the CSS padding feature to adjust the padding, now consider the following example.

The result of the mentioned example will be as follows.

Cellpadding

Cell padding specifies the space between the cell content and its borders.

Firstname Lastname Age Jill Smith 50 Eve Jackson 94 John Doe 80

Tip: Try to change the padding to 5px.

Left-align Headings:

The headings in a table are displayed in the center by default, which can be adjusted with the help of this feature, now consider the following example in order to understand it better.

The result of the above example will be as follows.

Left-align Headings

To left-align the table headings, use the CSS text-align property.

Firstname Lastname Age Jill Smith 50 Eve Jackson 94 John Doe 80

Add Border Spacing:

You may want to have a space between each cell while creating a table, which you must use the CSS-border-spacing feature in order to achieve this goal, now consider the example which is given below.

Finally, the result of this example will be in such a way that there would be a space between each cell.

Cell that Spans Many Columns:

You may want to have one more column in a row of the table you have created than the other rows in the table, which you have to use the colspan feature in order to achieve this goal, now pay attention to the example which is mentioned below.

The result of the mentioned example will be as follows.

Cell that spans two columns

To make a cell span more than one column, use the colspan attribute.

Name Telephone Bill Gates 55577854 55577855

Cell that Spans Many Rows:

You may want to create more than one row in a cell, for doing this you only need to use the rowspan feature, now pay attention to the following example.

The result of this example will be as follows.

Cell that spans two rows

To make a cell span more than one row, use the rowspan attribute.

Name: Bill Gates
Telephone: 55577854 55577855

Add a Caption:

One of the must-have items in a table is the table caption, and in order to create it for a table, you only need to use the caption tag, which is very useful, now consider-following example.

The result of the example, which have been mentioned, will be as follows.

Table Caption

To add a caption to a table, use the caption tag.

Monthly savings
Month Savings
January $100
February $50

id attribute:

If you want to create a specific table that has certain properties, add an id property to the table, now pay attention to the following example.

The result of the above example will be as follows.

Styling Tables

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
John Doe 80

HTML Images:

As you know, the appearance of

a site is of a great importance

, and it is the appearance of the site that at first glance causes the users to be attracted to the site and prefer to use it in order to achieve their goals, one of the things that can significantly increase the attractiveness of a website is the presence of different images on it, as you know, images can cause the user to be attracted to the site quickly, in the following, we are going to discuss the way you can add different images to the site.

Consider the following example.

In order to be able to put the various images you want on the website, you need to use the HTML tag img, and in order to be able to place the images correctly on the website, it is necessary to correctly specify attributes such as src and alt, which we are going to explain in the following section.

- Src:

It specifies the path of the image, this feature is very important and if you are not careful while creating it, when the users visit your site, they won't be able to see the image and eventually won't gain a positive user experience, which means that all your effort were wasted, so you need to be extremely careful to be able to provide an attractive site for your users.

In fact, when a user

visits a site and the web page

is loading, it is the browser that takes the image from a web server and inserts it into the page, therefore, you have to make sure that the image in relation to the web page remains at the same point, otherwise your visitors will receive a broken link icon, if the browser cannot find the image, the broken link icon and alt text are displayed.

Now consider the following example.

- Alt:

It specifies another text for the image, as we have mentioned in the previous feature, when the user cannot see the image for any reason, the text is replaced and the user will see the text instead of the image, there may be several reasons why the image is not displayed, including slow connection speeds and so on.

Consider the following example.

The result of the above example will be as follows.

If a browser cannot find the image, it will display the alternate text:

Flowers in Chania

You may want to resize the images to your liking or make other changes to them, which we are going to discuss in the following.

Style:

You may want an image to be large or small, so you can finally set the length and width to the size you want, now pay attention to the following example.

Images in Another Folder:

If you want to put your desired images in a subfolder, you should note that enter the folder name in the src attribute, now consider the following example.

Images on Another Server / Website:

Some websites may point to an image on another server, in order to point to an image on another server, you must specify an absolute (complete) URL in the src attribute, in this regard, the point that you should pay attention to, is that the images that you enter this way, shouldn't have copyright, and if you use them without considering this issue, you may encounter a problem, so that you have to follow the copyright laws regarding this type of image and use images according to them.

Animated Images:

This feature, which you can add to the images, can have a huge impact on attracting different users.

Now consider the following example.

Image as a Link:

In order to use an image as a link, you should put the img tag inside the a tag, now pay attention to the following example.

Image Floating:

Use the CSS float property to let the image float to the right or to the left of a text, consider the following example.

Last word:

In general, there are various features in this programming language, the use of each of which can have a significant impact on attracting different users, in this article, we have mentioned the method of creating a table as well as placing different images on a web page, so that you can create the website you want based on what has been said as well as the examples which have been given to you.