HTML #11 - Tables in HTML and it's properties #part1
Hello friends, welcome to the another tutorial of Programming Infinity. In this tutorial, we will know about HTML Tables and also know about some of its properties. So friends, let's begin...
Introduction
Table is an important part for any document. It is used to arrange data having some Common property in rows and columns. In HTML, tables are created using <table>...</table> element. Any visible component like, text, images, any another table and so on, can be shown in the tables.
Basic Structure
<table>
<tr>
Contains data cell to store visible components of HTML, and table header, which gives a brief description about any particular column of table.
</tr>
</table>
In the above code, first element "<table>....</table>" is the root element i.e. Any another element excluding <table>...</table> which helps in the creation of table must be inside this tag. Its just like the <html> tag which is the root element, and contains another child elements.
Second line of code contains <tr>...</tr> element. It is used for adding a row to a table. We can also understand from its tag <tr>, that, it is used to add a row to table, as it stands for table row (tr).
Last two lines of code is the closing tag for the <tr> tag and <table> tag respectively. It is used because, these two are container element, and there is must for a container element to have a closing tag, because it contains some content in it.
Simple Table
<table>
<tr>
<th>
Number
</th>
<th>
Products
</th>
</tr>
<tr>
<td>
01
</td>
<td>
Programming Infinity
</td>
</tr>
</table>
First two lines of the above given code is used for initializing a table and a table row respectively.
Third line of code is the "<th>" element, which is used to add a table header to any column. Table header is used to give a brief introduction to the data, which is shown in the columns below the particular table header. By default, the table header is bold and centered, but we can customize it through CSS. We will know about this in the upcoming tutorials.
Above code also contains the "<td>" element, which is used to add a table cell/data cell to any row. It contains all the data of the table, visible to the user. e.g. images, text, tables etc.
Whole working
"<table>...</table>" element defines a table in the HTML Code. After that, two table rows are created using "<tr>...</tr>" element. One is for storing the table headers, and another is for storing the table data.
In the first row, two table headers are created using "<th>...</th>" element for storing text, which is displayed as the table header.
In the second row, two data cell are created using "<td>...</td>" element, which is used to store the number and the name respectively as specified in the table header.
P.I. terms :-
- <tr> :- It stands for table row, which contains all the header and the data cells. This element is used to add a row to a table.
- <th> :- It stands for table header. This element is used to add a table header to any column.
- <td> :- It stands for table data. It stores all the visible components of the table, like, images, text, lists etc. This element is used to add a table cell/data cell/single column to any row.
Output
In the above output, we can see a table with two row, two table headers, and two table cells with some text data. Hence, the table that we had designed is working properly. We can now, add more things into it according to our needs.
Designing or Customizing Table
We can design a table according to our needs easily by using css properties or some predefined attributes. We will here know about some common css property of table. For applying these properties to the elements, we will use the style attribute, which takes its value in CSS property:value pair and applies it to the respective element.
1. width :-
It is used to set the width of the table. For giving the width to the table, which will automatically adapt itself to the desired space available, we had to specify the width as 100%, so that all the available space will be covered, and the table will automatically resize itself according to various screen sizes.
1. width :-
<table style="width:100%">
Content.....
</table>
Content.....
</table>
It is used to set the width of the table. For giving the width to the table, which will automatically adapt itself to the desired space available, we had to specify the width as 100%, so that all the available space will be covered, and the table will automatically resize itself according to various screen sizes.
2. border :-
It is used to add border to any visible component of HTML. As table is a visible component, so the border can also be applied to it. We can also apply border to the table row, table cell and table header, because they are also visible elements.
It takes value in three parts. First is the height of the border, second is the type of border, and third is the color of the border.
3. border-collapse :-
It is used to collapse the border into a single border, or to show it as a standard border for any visible element. In tables, when we add border to the elements they are separated from each other. This element combines them into a single border.
4. padding :-
It is used to add space in between the data content in the table cell and the border of the table cell.
5. border-spacing :-
It is used to add space between the borders of the table, table row and table cell. This property only takes effect when, border-collapse property is not used or not set to collapse, because collapse will collapse all the border into single border, and this element add space between two borders.
6. text-align :-
It is used to align the data content ( images, videos, text etc. ) in the table cell. By default the text/ visible data is aligned to the left.
So friends, that's all for this tutorial. Hope you enjoyed it. Please write your lovely comments below. Till then, wait for the next tutorial and By by...
Thanks -
Programming Infinity ( Samridh Sharma ).
<table style="border:1px solid black">
<tr style="border:1px solid black">
<td style="border:1px solid black">
Programming Infinity
</td>
<td style="border:1px solid black">
Programming in a way to understand
</td>
</tr>
</table>
border : 1px ( height of the border) solid ( type of border solid, dashed etc. ) black ( color of the border );
<tr style="border:1px solid black">
<td style="border:1px solid black">
Programming Infinity
</td>
<td style="border:1px solid black">
Programming in a way to understand
</td>
</tr>
</table>
border : 1px ( height of the border) solid ( type of border solid, dashed etc. ) black ( color of the border );
It takes value in three parts. First is the height of the border, second is the type of border, and third is the color of the border.
3. border-collapse :-
<table style="border:1px solid black;
border-collapse: collapse;">
<tr style="border:1px solid black; border-collapse:collapse;">
<td style="border:1px solid black; border-collapse:collapse;">
Programming Infinity
</td>
<td style="border:1px solid black; border-collapse:collapse;">
Programming in a way to understand
</td>
</tr>
</table>
border-collapse: collapse;">
<tr style="border:1px solid black; border-collapse:collapse;">
<td style="border:1px solid black; border-collapse:collapse;">
Programming Infinity
</td>
<td style="border:1px solid black; border-collapse:collapse;">
Programming in a way to understand
</td>
</tr>
</table>
It is used to collapse the border into a single border, or to show it as a standard border for any visible element. In tables, when we add border to the elements they are separated from each other. This element combines them into a single border.
4. padding :-
<table style="border:1px solid black;
border-collapse: collapse;">
<tr style="border:1px solid black; border-collapse:collapse;">
<td style="border:1px solid black; border-collapse:collapse; padding:20px;">
Programming Infinity
</td>
<td style="border:1px solid black; border-collapse:collapse; padding:10px;">
Programming in a way to understand
</td>
</tr>
</table>
border-collapse: collapse;">
<tr style="border:1px solid black; border-collapse:collapse;">
<td style="border:1px solid black; border-collapse:collapse; padding:20px;">
Programming Infinity
</td>
<td style="border:1px solid black; border-collapse:collapse; padding:10px;">
Programming in a way to understand
</td>
</tr>
</table>
It is used to add space in between the data content in the table cell and the border of the table cell.
<table style="border:1px solid black;
border-spacing:10px;">
<tr style="border:1px solid black; border-spacing:10px;">
<td style="border:1px solid black; border-spacing:10px;">
Programming Infinity
</td>
<td style="border:1px solid black; border-spacing:10px;">
Programming in a way to understand
</td>
</tr>
</table>
border-spacing:10px;">
<tr style="border:1px solid black; border-spacing:10px;">
<td style="border:1px solid black; border-spacing:10px;">
Programming Infinity
</td>
<td style="border:1px solid black; border-spacing:10px;">
Programming in a way to understand
</td>
</tr>
</table>
6. text-align :-
<table style="border:1px solid black;
border-collapse: collapse;">
<tr style="border:1px solid black; border-collapse:collapse;">
<td style="border:1px solid black; border-collapse:collapse; text-align: center;">
Programming Infinity
</td>
<td style="border:1px solid black; border-collapse:collapse; text-align:center;">
Programming in a way to understand
</td>
</tr>
</table>
border-collapse: collapse;">
<tr style="border:1px solid black; border-collapse:collapse;">
<td style="border:1px solid black; border-collapse:collapse; text-align: center;">
Programming Infinity
</td>
<td style="border:1px solid black; border-collapse:collapse; text-align:center;">
Programming in a way to understand
</td>
</tr>
</table>
So friends, that's all for this tutorial. Hope you enjoyed it. Please write your lovely comments below. Till then, wait for the next tutorial and By by...
Thanks -
Programming Infinity ( Samridh Sharma ).
Comments
Post a Comment