This
article will show you how you can create table in your html page and able
to use it’s different properties or attributes. This we can use in asp.net, mvc, php.
Some of my
previous articles are as follows: Li
Html Tag Styling By Css3 With Dynamic Circular Item Count In Asp.Net In Asp.Net, jQuery
DateTime Picker Calendar With Plush & Minush Date Changer In Asp.Net, Blink
Title or Multiple Browser Title Using jQuery in Asp.Net, MVC, jQuery
Digital Clock For Asp.Net, MVC and HTML Applications, jQuery
add remove css class onclick,
Add,
Remove, Validate CSS Class Applied To a HTML Control In Asp.Net Using jQuery., Free
HTML Editor To Design Website For Windows, Confirm
Message Box With Ok and Cancel Detect On Button Click Using JavaScript In HTML
and Asp.net.
So for this
article first we will create a new html page. First we will see how to create
simple ta with head and table body.
SIMPLE TABLE
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
|
Output:
TABLE WITH BORDER
<table border="1">
<thead>
<tr>
<th>Head 1</th>
<th>Head 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
|
Output:
TABLE WITH BORDER STYLE:
<table border="1" style="border-collapse:collapse;">
<thead>
<tr>
<th>Head 1</th>
<th>Head 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
|
Output:
<table border="1" style="border-collapse:collapse;border: 1px solid red;">
<thead>
<tr>
<th>Head 1</th>
<th>Head 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
|
Output:
TABLE WITH HEADER BACKGROUND COLOR:
<table border="1" style="border-collapse:collapse;">
<thead style="background-color:green;">
<tr>
<th>Head 1</th>
<th>Head 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
|
Output:
TABLE WITH WIDTH AND HEIGHT
<table border="1" style="border-collapse:collapse;" width=”100%”>
<thead style="background-color:green;">
<tr>
<th>Head 1</th>
<th>Head 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
|
Output:
TABLE PADING AND SPACIONG
<table border="1" style="border-collapse:collapse;" cellpadding="10px" cellspacing="10px">
<thead>
<tr>
<th>Head 1</th>
<th>Head 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
|
Output:
About the Author
0 comments:
Please let me know your view