ว่าด้วยเรื่องทำเว็บไซต์ภาษาHTML

1. Orjix
www.RongRean.com
หหหหหหหห หหหหหหหหหหหหห
HTML: Session หหห 3 หหหหหห 2

2. 
<table>
<tr>
<td>
<p>this is table content.</p>
</td>
<td>
<p>this is table content2.</p>
</td>
</tr>
</table>
www.rongrean.com Orjix
<table>
<tr> (row)
<td>(column)
1 2

3.  <th>
<table border="1">
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>
this is table content.
</td>
<td>
this is table content2.
</td>
</tr>
</table>
www.rongrean.com Orjix
Attribute border=“1” tag
table 1
<th> <td> column <th>

4.  <caption>
<table border="1" width="20%">
<caption>this will show you how to make a caption</caption>
<tr>
<td>column1</td>
<td>column2</td>
</tr>
</table>
www.rongrean.com Orjix
attribute align=“…”
caption
<caption align=“bottom”>…..

5. 
<table border="10px" cellspacing="20px">
<tr>
<td>column1</td>
<td>column2</td>
</tr>
</table>
www.rongrean.com Orjix
border
cellspacing column

6. 
<table border="1px" cellpadding="20px">
<tr>
<td>column1</td>
<td>column2</td>
</tr>
</table>
www.rongrean.com Orjix
cellpadding column

7. 
<table width="50%" border="1px">
<tr>
<td>
column1
</td>
<td>
column2
</td>
</tr>
</table>
*browser
www.rongrean.com Orjix
50%
50%

8. 
<table height="50%" border="1px">
<tr>
<td>
column1
</td>
<td>
column2
</td>
</tr>
</table>
*width, height=“50%”
browser
www.rongrean.com Orjix
50%
50%

9. 
<table border="1px">
<tr>
<td colspan="2">column1</td>
<td>column2</td>
</tr>
<tr>
<td>column3</td>
<td>column4</td>
<td>column5</td>
</tr>
</table>
www.rongrean.com Orjix
<tr> column
colunm 2
column 2 2

10. 
<table border="1px">
<tr>
<td rowspan="2">column1</td>
<td>column2</td>
</tr>
<tr>
<td>column3</td>
<td>column4</td>
<td>column5</td>
</tr>
</table>
www.rongrean.com Orjix
rowspan column <tr> 2 1
*rowspan rowspan <tr> 2

11. 
<table border="1px” bgcolor="#00ff00">
<tr>
<td>column1</td>
<td>column2</td>
</tr>
</table>
<table border="1px">
<tr>
<td bgcolor="#00ff00">column1</td>
<td>column2</td>
</tr>
</table>
www.rongrean.com Orjix
Attribute “bgcolor”
attribute <table>
attribute <td> <tr> column
row

12. 
<table border="1px" bordercolor="#00ff00">
<tr>
<td>column1</td>
<td>column2</td>
</tr>
<tr>
<td>column3</td>
<td>column4</td>
</tr>
</table>
www.rongrean.com Orjix

13. 
<table border="1px" background="rockman.jpg">
<tr>
<td>column1</td>
<td>column2</td>
</tr>
<tr>
<td>column3</td>
<td>column4</td>
</tr>
</table>
www.rongrean.com Orjix
BEFORE
AFTER

14. 
www.rongrean.com Orjix
<table border="1px" width="100%" height="100%">
<tr>
<td background="rockmanzx.jpg">column1</td>
<td>column2</td>
</tr>
<tr>
<td>column3</td>
<td background=“
band.jpg">column4
</td>
</tr>
</table>
<table border="1px" width="100%" height="100%">
<tr>
<td background="rockmanzx.jpg">column1</td>
<td>column2</td>
</tr>
<tr>
<td>column3</td>
<td background=“
band.jpg">column4
</td>
</tr>
</table>
*(column)*(column)

15. 
<table border="1px" frame="border" rules="all">
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td>column4</td>
<td>column5</td>
<td>column6</td>
</tr>
<tr>
<td>column7</td>
<td>column8</td>
<td>column9</td>
</tr>
</table>
www.rongrean.com Orjix
Attribute
frame rules
frame rules
rules
frame

16. Attribute frame
www.rongrean.com Orjix
Above
Below
Border
Box
Hsides
Lhs
Rhs
Void
Vsides

17. Attribute rules
www.rongrean.com Orjix
All
Cols column
Group thead, tbody, tfoot colgroup
None
Rows row

18. 
www.rongrean.com Orjix
<table border="1px" >
<tr>
<td width="150px" align="right">column1</td>
<td width="150px" align="center">column2</td>
<td width="150px" align="left">column3</td>
<td width="150px" align="justify">
column 4 test test test test test test test test test test
</td>
</tr>
</table>
<table border="1px" >
<tr>
<td width="150px" align="right">column1</td>
<td width="150px" align="center">column2</td>
<td width="150px" align="left">column3</td>
<td width="150px" align="justify">
column 4 test test test test test test test test test test
</td>
</tr>
</table>
Rigth
left
center
Justify *()
right center left justify

19. 
www.rongrean.com Orjix
<table border="1px" width="100%" height="100%">
<tr>
<td valign="baseline">column1</td>
<td valign="bottom">column2</td>
<td valign="middle">column3</td>
<td valign="top">column4</td>
</tr>
</table>
<table border="1px" width="100%" height="100%">
<tr>
<td valign="baseline">column1</td>
<td valign="bottom">column2</td>
<td valign="middle">column3</td>
<td valign="top">column4</td>
</tr>
</table>
baseline *
bottom
middle
top
baseline bottom

20. 
www.rongrean.com Orjix
<table border="1px" width="100%" height="100%">
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td>column4</td>
<td>column5</td>
<td>
<table border="1px" width="100%" height="100%">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="1px" width="100%" height="100%">
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td>column4</td>
<td>column5</td>
<td>
<table border="1px" width="100%" height="100%">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
</table>
<td>

21. 
<img>
www.rongrean.com Orjix
<table border="1px" width="100%" height="100%">
<tr>
<td>pic1<br><img src="rockmanzx.jpg"/></td>
<td>pic2<br><img src="band.jpg"/></td>
</tr>
</table>
<table border="1px" width="100%" height="100%">
<tr>
<td>pic1<br><img src="rockmanzx.jpg"/></td>
<td>pic2<br><img src="band.jpg"/></td>
</tr>
</table>

22. <colgroup>
 colgroup
www.rongrean.com Orjix
<table border="1px" width="100%" height="100%">
<colgroup span="2" width="150px"></colgroup>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td><td>7</td><td>8</td>
</tr>
</table>
<table border="1px" width="100%" height="100%">
<colgroup span="2" width="150px"></colgroup>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td><td>7</td><td>8</td>
</tr>
</table>
2
Colspan=“2”
Width=“150px”
<colgroup> <table><colgroup> <table>

23. <col>
 <colgroup>
colspan <col>
www.rongrean.com Orjix
<table border="1px">
<colgroup>
<col span="2" width="50px"/>
<col width="150px"/>
<col span="2" width="100px"/>
</colgroup>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
</table>
<table border="1px">
<colgroup>
<col span="2" width="50px"/>
<col width="150px"/>
<col span="2" width="100px"/>
</colgroup>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
</table>
<col> <colgroup>

24. <col>
www.rongrean.com Orjix
Span=“2”
Width=“50px”
Span=“1”
Width=“150px”
Span=“2”
Width=“100px”

25. <thead>,<tbody>,<tfoot>
 3
www.rongrean.com Orjix
•<thead> (table header)
•<tbody> (table body)
•<tfoot> (table footer)
•<thead> (table header)
•<tbody> (table body)
•<tfoot> (table footer)
<table border="1px">
<thead>
<tr>
<td>…</td>
</tr>
</thead>
<tbody>
<tr>
<td>…</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>…</td>
</tr>
</tfoot>
</table>
<table border="1px">
<thead>
<tr>
<td>…</td>
</tr>
</thead>
<tbody>
<tr>
<td>…</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>…</td>
</tr>
</tfoot>
</table>
Table header
Table body
Table footer
*<thead>, <tbody>
<tfoot> <tr>

26. <thead>,<tbody>,<tfoot>

www.rongrean.com Orjix
<table border="1px">
<thead>
<tr>
<td>head1</td><td>head2</td><td>head3</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>6</td><td>7</td><td>8</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>footer1</td><td>footer2</td><td>footer3</td>
</tr>
</tfoot>
</table>
<table border="1px">
<thead>
<tr>
<td>head1</td><td>head2</td><td>head3</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>6</td><td>7</td><td>8</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>footer1</td><td>footer2</td><td>footer3</td>
</tr>
</tfoot>
</table>

27. <thead>,<tbody>,<tfoot>
 <thead>,<tbody>,<tfoot>
thead>tbody>tfoot
www.rongrean.com Orjix
<table border="1px">
<tfoot>
<tr>
<td>footer1</td><td>footer2</td><td>footer3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>6</td><td>7</td><td>8</td>
</tr>
</tbody>
<thead>
<tr>
<td>head1</td><td>head2</td><td>head3</td>
</tr>
</thead>
</table>
<table border="1px">
<tfoot>
<tr>
<td>footer1</td><td>footer2</td><td>footer3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>6</td><td>7</td><td>8</td>
</tr>
</tbody>
<thead>
<tr>
<td>head1</td><td>head2</td><td>head3</td>
</tr>
</thead>
</table>