HTML Table Design, Spacing & Spaning

Posted on by

How to create a table, that have published my preview lesson, that you can learn by clicking me. Now lets learn how to do cellspacing to each other cell of a table, Table High & Width, Clospan, Rowspan.

1. A Table for Cell Spacing 5.

HTML Coding

Show in Browser

[code language=”css”]

<table border="4" cellspacing="5">
<tr>
<td>Cell Spacing=5</td>
<td>Cell Spacing=5</td>
</tr>
<tr>
<td>Cell Spacing=5</td>
<td>Cell Spacing=5</td>
</tr>
</table>
[/code]
Cell Spacing=5 Cell Spacing=5
Cell Spacing=5 Cell Spacing=5

=============================================

2. Cell Spacing 25

HTML Coding

Show in Browser

[code language=”css”]
<table border="4" cellspacing="25">
<tr>
<td>Cell Spacing=25</td>
<td>Cell Spacing=25</td>
</tr>
<tr>
<td>Cell Spacing=25</td>
<td>Cell Spacing=25</td>
</tr>
</table>
[/code]
Cell Spacing=25 Cell Spacing=25
Cell Spacing=25 Cell Spacing=25

===================================

3. A Table Width*Height=350*150

HTML Coding

[code language=”css”]
<table width="350" height="150" border=4>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
[/code]

Show in Browser
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

=============================

4. A Table Width*Height=150*350

HTML Coding

Show in Browser

[code language=”css”]
<table width="150" height="350" border=4>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
[/code]
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

===============================================

5. A Table With Colspan

HTML Coding

Show in Browser

[code language=”css”]
<table border="1">
<tr>
<td colspan="2">Colspan=2</td>
</tr>
<tr>
<td>Without Span</td>
<td>Without Span</td>
</tr>
</table>
[/code]
Colspan=2
Without Span Without Span

=================================

HTML Coding

Show in Browser

[code language=”css”]

<table border=4>
<tr>
<td colspan="3">Colspan=3</td>
</tr>
<tr>
<td>Without Span</td>
<td>Without Span</td>
<td>Without Span</td>
</tr>
</table>
[/code]
Colspan=3
Without Span Without Span Without Span

====================================

HTML Coding

Show in Browser

[code language=”css”]
<table border=4>
<tbody>
<tr>
<td colspan=2>Colspan=2</td>
<td colspan=3>Colspan=3</td>
</tr>
<tr>
<td>Without Span</td>
<td>Without Span</td>
<td>Without Span</td>
<td>Without Span</td>
<td>Without Span</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
[/code]
Colspan=2 Colspan=3
Without Span Without Span Without Span Without Span Without Span

=======================================

6. A Table With Rowspan

HTML Coding

Show in Browser

[code language=”css”]
<table border=1>
<tr>
<td rowspan=2>Rowspan=2</td>
<td>Without Rowspan</td>
<td>Without Rowspan</td>
</tr>
<tr>
<td>Without Rowspan</td>
<td>Without Rowspan</td>
</tr>
</table>
[/code]
Rowspan=2 Without Rowspan Without Rowspan
Without Rowspan Without Rowspan

===========================================

HTML Coding

Show in Browser

[code language=”css”]
<table border=4>
<tr>
<td rowspan=3>Rowspan=3</td>
<td>Without Rowspan</td>
<td>Without Rowspan</td>
</tr>
<tr>
<td>Without Rowspan</td>
<td>Without Rowspan</td>
</tr><tr>
<td>Without Rowspan</td>
<td>Without Rowspan</td>
</tr>
</table>
[/code]
Rowspan=3 Without Rowspan Without Rowspan
Without Rowspan Without Rowspan
Without Rowspan Without Rowspan

================================

HTML Coding

Show in Browser

[code language=”css”]
<table border=4>
<tbody>
<tr>
<td rowspan=2>Rowspan=2</td>
<td>Without Rowspan</td>
<td>Without Rowspan</td>
</tr>
<tr>
<td>Without Rowspan</td>
<td>Without Rowspan</td>
</tr>
<tr>
<td rowspan=3>Rowspan=3</td>
<td>Without Rowspan</td>
<td>Without Rowspan</td>
</tr>
<tr>
<td>Without Rowspan</td>
<td>Without Rowspan</td>
</tr>
<tr>
<td>Without Rowspan</td>
<td>Without Rowspan</td>
</tr>
</table>
[/code]
Rowspan=2 Without Rowspan Without Rowspan
Without Rowspan Without Rowspan
Rowspan=3 Without Rowspan Without Rowspan
Without Rowspan Without Rowspan
Without Rowspan Without Rowspan

==================================

7. A Table With Colspan & Rowspan

HTML Coding

Show in Browser

[code language=”css”]
<table border=4>
<tr>
<td>Normal</td>
<td colspan=2>Colspan=2</td>
<td colspan=3>Colspan=3</td>
</tr><tr>
<td rowspan=2>Rowspan=2</td>
<td>22</td>
<td>22</td>
<td>23</td>
<td>23</td>
<td>23</td>
</tr><tr>
<td>22</td>
<td>22</td>
<td>23</td>
<td>23</td>
<td>23</td>
</tr>

<tr>
<td rowspan=3>Rowspan=3</td>
<td>32</td>
<td>32</td>
<td>33</td>
<td>33</td>
<td>33</td>
</tr>

<tr>
<td>32</td>
<td>32</td>
<td>33</td>
<td>33</td>
<td>33</td>
</tr>

<tr>
<td>32</td>
<td>32</td>
<td>33</td>
<td>33</td>
<td>33</td>
</tr>
</table>
[/code]
Normal Colspan=2 Colspan=3
Rowspan=2 22 22 23 23 23
22 22 23 23 23
Rowspan=3 32 32 33 33 33
32 32 33 33 33
32 32 33 33 33

===============================================================

HTML Coding

Show in Browser

[code language=”css”]
<table border=10>

<tr>
<td>Normal</td>
<td>Colspan=2</td>
<td>Colspan=2</td>
</tr>

<tr>
<td>Rowspan=2</td>
<td>

<table border=10>
<tr>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td>22</td>
<td>22</td>
</tr>
</table>

</td>
<td>

<table border=10>
<tr>
<td>23</td>
<td>23</td>
<td>23</td>
</tr>
<tr>
<td>23</td>
<td>23</td>
<td>23</td>
</tr>
</table>

</td>
</tr>

<tr>
<td>Rowspan=3</td>
<td>

<table border=10>
<tr>
<td>32</td>
<td>32</td>
</tr>
<tr>
<td>32</td>
<td>32</td>
</tr>
<tr>
<td>32</td>
<td>32</td>
</tr>
</table>

</td>

<td>

<table border=10>
<tr>
<td>23</td>
<td>23</td>
<td>23</td>
</tr>
<tr>
<td>23</td>
<td>23</td>
<td>23</td>
</tr>
<tr>
<td>23</td>
<td>23</td>
<td>23</td>
</tr>
</table>

</td>
</tr>

</table>
[/code]
Normal Colspan=2 Colspan=2
Rowspan=2
22 22
22 22
23 23 23
23 23 23
Rowspan=3
32 32
32 32
32 32
23 23 23
23 23 23
23 23 23