Skip to main content

HTML tables , colspan, rowspan , caption and much more

Tables are one of the best element came with html5. We use tables almost everywhere, from school homework to presentations, tables always have been of great importance. Tables can be created in html document using table tag 
HTML
<table border="2">
 <tr>
  <td width="100">cell</td>
  <td width="100">cell</td>
  <td width="100">cell</td>
 </tr>
</table>
As you can see we added the container element table and in that we just coded another tag <tr> which means row. These tags add a table row in our table. 
The <td> element adds table data in the row. We added the attribute named border in the table tag so to differentiate the table from other elements. We also added the attribute width to each table data element to make its width equal to 100px
The above code will output this 
cellcellcell
A table header is defined with th tag. By default, table headings are bold and centered.
Note:
td are data containers for tables , they can contain any html element like images, lists ,another table etc.

ColSpan

In a table every table row don't have same no. of data , so we can increase the width of a td by adding a attribute colspan to a table cell.
HTML
<td colspan="2">2x width<td>
With the following example you can understand the role of colspan. In the following example the gap between Hydrogen and Helium is filled by a table cell with colspan value raised to 16.
 

RowSpan

As done above for colspan similar is rowspan but the difference is that it spands vertically in rows.
HTML
<table style="width:100%">
  <tr>
    <th colspan="2">Name:John Doe</th>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55558888</td>
  </tr>
  <tr>
    <td>55557777</td>
  </tr>
</table>
It will produce
Name:John Doe
Telephone:55558888
5557777

The caption tag

Add a caption in a table by caption tag.
Caption tag must come after the table tag

HTML
<table>
 <caption>The caption here</caption>
  ••• etc code here •••
</table>
An example below shows the caption
Price of fruits (per kg)
FruitPrice
Mango$2
Apple$2.5
Pomegranate$1.5

Comments

Post a Comment

Popular posts from this blog

CSS animations , flying rocket and rotating cube.

Learning CSS ANIMATIONS CSS animations are great and always been attractive for everyone. Today here I am gonna teach you the animation in which a font-awesome rocket is flying between the clouds and also a 3D rotating cube with perspective. The rocket animation is 2D and made with the help of font-awesome and css transform property. You can download the source file of flying rocket by Here  . For the full tutorial Go to  Rocket animation css tutorial  . Download the source file of rotating cube by  Here  . For full tutorial go to  to this link  .
Post a Comment
Read more

CSS text gradient - Web development Tutorials

Create pure css text gradients using simple trick . The gradient us made using background image property and the the background clip property has been set to text and at last color is set to transparent , to make a beautiful text gradient without any library but remember to use vendor prefixes. The codepen project is  here
2 comments
Read more

Basic CSS , Introduction to properties

CSS is a stylesheet language which runs in users browser to give a rich and decorative user-experience.Currently the latest version available of CSS is 3 and CSS4 is going to arrive with many new features. CSS3 brought many new features like Animations , transforms etc. Today here we are gonna cover all the basic properties used in CSS , which you are gonna use most of the time. The colors supported in CSS can be written in the form of hsba() or hsb() or rgb() or rgba() or hexadecimal or in color names. Color Opacity Background Border Box-shadow Height and Width Position Margins and paddings Display Text-Align Font Properties : Color The color property sets color of the text inside the selector. CSS p { color : red ; } //produces Hello world! CSS p { color : rgb ( 38 , 98 , 67 ) ; } //produces Hello world! Opacity The color property sets opacity of any selected element. It varies from 0 (invisbile) to 1(fully visbile) CSS p {...
Post a Comment
Read more