Hi friends,in this post I am sharing how to create table using html and css.Now paste the below code in your HTML editor.
<table border="1" ><tr >
<td>
row,cell codes added
</td>
<td>
row,cell codes added
</td>
<td>
row,cell codes added
</td>
</tr>
<tr >
<td>
row,cell codes added
</td>
<td>
row,cell codes added
</td>
<td>
row,cell codes added
</td>
</tr>
</table>
- Now we have add css for the above code.Below I had given the full code using css.
<style>
.tabd{
border-collapse:collapse;}
.rc{border:1px solid #0066ff;
}
</style><table class="tabd" >
<tr class="rc" >
<td class="rc" >
row,cell codes added
</td>
<td class="rc" >
row,cell codes added
</td>
<td >
row,cell codes added
</td>
</tr>
<tr >
<td class="rc" >
row,cell codes added
</td>
<td class="rc" >
row,cell codes added
</td>
<td class="rc">
row,cell codes added
</td>
</tr >
</table> - In the above ,I have created css for table named it as tabd.And within table tags I added class=”tabd”.And border collapse here for making table border to single one .As a initial output you cannot see any borders in table like below
- Now within tr tags we added class=”rc”.When adding rc class to first tr tag you will get like below,
- Next we adding rc class to second tr tag we get like below,
- Now we create border to td tags we can use the same rc class for first,second td tags you get like below,
- In third td tag its your wish to add rc class because already table border.adding doesn’t affect any changes.
- Adding rc class to 4th and 5th td tags you get like below,
- Its your wish to add rc class 6th td tags.Finally you get like above.
As a beginner you have to play with each lines of codes and make fun.
0 comments :
Post a Comment