Tables In HTML
Tables are one of the most important element of HTML. You can set the complete layout of your webpage with tables. <table> tag is used to define a table in document. It creates a table in your web page. A webpage layout is created with the help of <div> tags or tables or both together. We will learn about <div> tag later. Let us focus on html tables now. Tables are very usefull in HTML it can help you to set your web page layout or place things in your web page in a proper order etc.
Important table tags :
- <table> : It defines start of a table. Always start your table with <table> tag and end with </table>
- <th> : defines table heading.Remember there can be only on <th> tag in your table. Its optional though. By default text is aligned to the center of the cell in table heading.
- <tr> : This tag defines a new row. Everytime you want a new row you have to use <tr> tag, but remember to close it before with </tr> if you have used any above. You can place as many as columns you want in a table row.
- <td> : This tag is used to define a column inside a table row it stands for table data. Remember always place <td> </td> tags inside table row. Your actual table table data comes inside this tag. Whatever you write inside <td></td> tags is displayed inside your table. If you write anything outside <td></td> tags it wont be displayed inside the table, instead will be displayed somewhere above the table so be carefull with it.
<table border=1 align='center'>
<td>Column 1</td> <td>Column 2</td>
<td>Column 3</td> <td>Column 4</td>
- Border :
Border attributes as the name says sets the border of the table. If you do not secify border attribute in the table tag, it will take default value i.e. 0 and will show no border for your table. You can also give color to your border using bordercolor attribute in the table tag. You can apply any color to it, by default border color will be somewhat in grey shade.
- Width :
Width attribute set the width of the table. You can specify width of the table in pixels or percents. If you do not specify widt attribute for your table, its width will change
accordingly with the content in it.
- Height :
Width attribute set the height of the table. You can specify width of the table in pixels or percents. If you do not specify widt attribute for your table, its height will change accordingly with the content in it.
- Cellpadding :
It is used set margin inside a cell. Once you specify this in table tag margin is set with the cells of the table from every sides. In simple language it will set the space between the text and the border of the table.
- Cellspacing :
It defines space between two cells in a table. You can increase or decrease space between two cells as per your requirement.
- Colspan :
You can use colspan attribute in <th> or <td> tag to merge two or more table columns together. For example : If you have four cells in your table and you want to merge top two table cells then you can specify colspan with value two in your <td> tag. Now once you add colspan tag for merging two cells, you will be left with one addidtional cell so you have to delete one cell from the top row where you have not specified the colspan tag to adjust it properly.
- Rowspan :
Merge two or more than two rows in a table. It works the same way like colspan do the only difference is it is used for merging rows and not columns.
- Align :
Sets the alignment of the text in a cell. You have to specify align attribute in <td> tag. If you do not set align attribute then by default it will be set to left. You can set it to right and center by adding align attribute to <td> tag with values right and center repectively.
- Valign :
Sets Vertical alignment of the text in cell. You have to specify valign attribute in <td> tag. If you do not set align attribute then by default it will be set to middle. You can set it to top or bottom by adding valign attribute to <td> tag with values top or bottom repectively.
<table border=2 cellpading=2 cellspacing=2 width=100% height=200>
<td rowspan=2 valign='top'>Column 1</td>
<td align='right'>Column 4</td>
*(try experimenting with attributes values to understand the changes applied by it)
Next Chapter - HTML Marquee