Blockquote,Marquee and Table Tag

Posted On // Leave a Comment



In our webpage when we want to insert quotes on a sentence we use <q> tag.

Quoting a whole Paragraph


To make a paragraph quoted or different we use Blockquote.

<blockquote> Your paragraph here   </blockquote>

For Example
Hello readers I am back after 2 weeks. As Technosians admin was unwell for
2 weeks that's why there was no update since last 2 weeks. This absence had
made technosians indexing low or may be Google had forgot Technosians from
it's database. So to get back on it's indexing list we have to post here again
daily and now Technosians will be regular updated though it is expected.

The above paragraph is the example of Blockquote.


Scrolling Text in Your Webpage

Sometimes you want to scroll the text on your webpage. To facilitate this there is <marquee> tag in HTML

<marquee>  your text here </marquee>
Now if you want to scroll the text in a particular direction then we use direction attribute

To scroll text towards right direction then we will use

<marquee direction="right"> Hello There </marquee>

You can use UP or Down or Left as desired.

Creation Of Table in your Webpage

Sometime we needs to create a table in our Webpage.

To create a table HTML has <table> tag for the creation of table

For creation of Table use the following HTML
<table>                        
     <tr>                        
         <td>    Name                </td> 
         <td>    Domain             </td>   
      </tr> 
          <td>   Technosians       </td>
          <td>   technosians.com</td>
      </tr>
</table>

Here <tr> tag is used to start a row and inside the <tr> tag <td> tag is used to define Column content.

The above HTML will create the following table



    

Customizing Table with various Attributes


Creating a Border 

 


<table border="5">                
     <tr>                        
         <td>   Name </td> 
         <td>  Domain  </td>   
      </tr> 
         <td>  Technosians</td>
         <td>  technosians.com</td>
      </tr>    
</table>



To apply colour on your table border use attribute Bordercolor


<table border="5" bordercolor="red">



You can also set alignment for your Table


<table align="center">



You can change the width of your table


<table width="1000">

Change the width of the columns of your Table


<td width="300"> Your text here     </td>




Cellspacing in Table



<table border="5" cellspacing="20">



Table Height


<table height ="300">

Giving Title To your Table

 

<ta<caption> <font size="10"> your Table Title here </font> </caption>


Creating  Nested Rows and Columns


Nesting columns


When an element exists inside and another element then the process is called
nesting.

So To create a Nested columns we use colspan="2" attribute if we want 2 columns
if you wants 3 you can use colspan="3"




to create above table in my Html I Use colspan

              <tr>
                      
                      <td width="500" > <font size="6">Name</font></td>
                      <td width="500"colspan="2"><font size="6"> Domain</font></td>
                   </tr>
                    <tr> 
                       <td><font size="4"> Technosians</font></td>
                       <td><font size="4">technosians.com</font></td>
                       <td><font size="4"> www.technosians.com</font></td>
                    </tr>  


Nesting Rows




Now To create a row inside row we use rowspan="2" attribute if you want's 2
another rows. You can change the number as desired.

 Check out this html for nested row

<tr>
                     
           <td>Name</td>
           <td> Technosians</td>
            </tr>
                    <tr>                          <!-- first Row -->
                       <td rowspan="2"> Domain</td> 
                       <td>technosians.com</td>
                    </tr>
                    <tr>                           <!-- Another Row-->
                       <td> www.technosians.com</td>
                    </tr>

Now Practice This and enjoy. If you face any problem or having some suggestions
then do tell us in comments.

0 comments:

Post a Comment