0

If you have read the basic articles, you should be fully acquainted with the basic concepts of HTML by now. You learned the general format and syntax of HyperText Markup Language programming. You learned to create the first paragraphs, put the first pictures, make different lists, link the pages together. also, You are familiar with concepts such as headings, text formatting, comments, quotes, and more. If you have not read previous articles and tutorials, enter the Html home from this link and access countless free tutorials and templates. In this article, we are going to teach you how to create a table in Html. We are also going to teach you how to use javascript and CSS inside the main code. Well, let’s finish the introduction and go to the tutorial.

HTML Tables

Element <table> is used to display tabular data. Using this element, you can easily display your data in different rows and columns. In the following, we will teach you how, when, and why to use tables in Html. Element <table> allows you to place photos, text, etc. in table cells. The construction of the table starts with the tag of the beginning of <table> and ends with the second tag</table>. The <tr> tag is used to create rows and the <td> tag is used to create columns. The <the> tag is also used to specify table headers. For example, in the following code, we have prepared a simple table for you to get acquainted with the general form of making tables in Html.

<table>
  <tr>
    <th>sitename</th>
    <th>DA</th>
    <th>PA</th>
  </tr>
  <tr>
    <td>pinkpen</td>
    <td>54</td>
    <td>38</td>
  </tr>
</table>

Add a Border to the table

To add a Border to a table, you must use the Border attribute in CSS. You can define the border for your table or rows or columns. The following HTML code example will guide you further.

table, td {
  border: 2px solid red;
}

Add Padding to table

Cell padding creates a space between the content and the border of each cell. The method of use is the same as the previous element. You should get help from CSS. To use this method, you can simply use it with the attribute padding. The following example will help you to get acquainted with this element more easily.

td {
  padding: 20px;
}

Colspan Attribute

This attribute is used when we want to merge two or more columns. To use it in the Html table, just type Colspan inside the and tags. Then you write the number of houses you want to combine in front of it. Check out the example below that can further guide you.

<table border="1" >
  <tr>
    <th>site Name</th>
    <th colspan="2">authority</th>
  </tr>
  <tr>
    <td>pinkpen.net</td>
    <td>52</td>
    <td>37</td>
  </tr>
</table>
html code output colspan

rowspan Attribute

This attribute is used when we want to merge two or more rows. It is very similar to the previous adjective we introduced, except that it combines rows. In the following code, pay attention to the method of using this attribute

<table>
  <tr>
    <th>siteName:</th>
    <td>pinkpen.net</td>
  </tr>
  <tr>
    <th rowspan="2">authority:</th>
    <td>53</td>
  </tr>
  <tr>
    <td>35</td>
  </tr>
</table>
html code output rowspan

Add captions for html tables

Adding captions is very easy, just put the text of your caption inside the <caption> tags. Then place it wherever you like in your table code. For example this code: <caption>Rainfall statistics in New York</caption>

Collapsed Borders

When you use a normal border, a margin is created in the form of a hollow rectangle. You can use this property to make the borders of the table form a line, ie the two sides of a rectangle are connected. You must use some CSS code to do this. Do not worry that you do not know. It is not a complex CSS code and you can understand it by looking at the code below.

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
border-collapse

Left-align and right-align the html Headers table

Now that you have worked with css, let’s go and give another simple tutorial. Using this property, you can easily degrade your table headings. By default, all table headings text is in the middle before using this property.

th {
  text-align: left;
}
moji

moji

I am a computer engineering student, I have been working in SEO and WordPress for almost 8 years and I also have programming skills.

Leave a Reply

asdas

Copyright © 2019 pinkpen.net