การสรา งตาราง (TABLE)
<table border = 5 width=100% bgcolor=“#ccaa00”> <caption align=\"top\">ตารางรายรบั รายจายประจําเดอื น </caption> <tr> <th>หวั ขอ </th><th>หัวขอ </th><th>หัวขอ</th> </tr> <tr> <td>ขอมลู </td> <td>ขอ มูล</td> <td>ขอ มูล</td> </tr> <tr> <td>ขอมูล</td> <td>ขอ มลู </td> <td>ขอ มลู </td> </tr> </table>
คาํ อธบิ าย รปู แบบ<table> .... </table> <table bgcolor=\"color\"> .... </table> กาํ หนดสพี นื้ ในตาราง <table border=\"pixels\"> .... </table> กาํ หนดขนาดขอบตาราง <table width=\"pixels/%\"> .... </table> กําหนดความกวาง การสรางตารางขอมลู โดยจะมคี าํ สัง่ ท่ีใชร ว มกันคอื คาํ สัง่ <TR> ในการสรา งแถวเซลลข อ มลู , คําสง่ั <TD> ในการสรา ง เซลลขอมูล, คําสง่ั <TH> ในการสรางหวั ตาราง
<body> <table border= 1 width=100% borderColor=steelblue> <tr width=\"30%\" bgColor=skyblue> <th>ลําดบั </th> <th>รายการ</th> <th>ราคา </th></tr> <tr> <TD width=\"30%“>1</TD><TD width=\"30%\">สบู </TD> <TD width=\"30%\">27.50</TD> </tr> <tr> <td>2</td><td>ผงซักฟอก </td><td>99.00</td></tr> </table></body>
การกาํ หนดขอ ความกาํ กบั ตาราง (table CAPTION)
<body><table border=1> <caption align=\"top\">ตารางรายรบั รายจายประจําเดอื น </caption> <tr> <th>เดอื น</th><th>มกราคม</th><th>กุมภาพันธ </th><th>มีนาคม</th></tr> <tr> <td>รายรับ </td><td>25000</td><td>23000</td><td>24500 </td></tr> <tr> <td>รายจาย </td><td>21000</td><td>22500</td><td>23100 </td></tr></table></body>
การกําหนดการจัดวางขอความ <TABLE BORDER=\"1\" WIDTH=\"95%\" HEIGHT=\"100\"> <TR> <TD align=\"left\" valign=\"top\">ซายบน</TD> <TD align=\"right\" valign=\"middle\">ขวากลาง </TD> </TR> <TR> <TD align=\"center\" valign=\"bottom\">กลางลาง </TD> <TD align=\"right\" valign=\"top\">ขวาบน</TD> </TR> </TABLE>
คําอธบิ าย ใชแ สดงคําอธิบาย หรือ ขอ ความประกอบตารางไว บนสว นบนหรือสว นลางของตารางขอ มลู รปู แบบ <caption align=\" top | bottom | left | right \"> กําหนดตําแหนงของคําอธบิ ายตาราง
การสรางหัวเรอ่ื งของตาราง (Table Heading) และ การสรางเซลลขอมลู (Table Data)
<br><br><table border=3> <tr> <th colspan=\"2\" bgcolor=\"#ffffe0\">CPU</th> <th colspan=\"2\">RAM</th> </tr> <tr> <td rowspan=\"2\">Mhz</td> <td>450</td> <td>500</td> <td>550</td> </tr> <tr> <td>600</td> <td>700</td> <td>750</td> </tr> </table>
คาํ อธบิ าย เปนการสรา งเซลล หวั ตาราง ซง่ึ ทาํ หนาท่ีกาํ กบั เซลขอ มลู ในแนวคอลมั นท ่ี กาํ หนด รปู แบบ<th align=\"left | right | center | justify | char\"> .... </th> กาํ หนดตาํ แหนงของขอ ความในตารางตามแนวนอน <th valign=\"top | middle | bottom | baseline\"> .... </th> กําหนดตาํ แหนง ของขอความในตารางตามแนวต้งั <th bgcolor=\"color\"> .... </th> กําหนดสพี นื้ ของตาราง <th height=\"pixels | %\"> .... </th> กําหนดความสูงของตาราง <th width=\"pixels | %\"> .... </th> กาํ หนดความกวางของตาราง <th rowspan=\"number\"> .... </th> กําหนดการรวมชองเซลลใ นแนวต้งั <th colspan=\"number\"> .... </th> กําหนดการรวมชองเซลลในแนวนอน
ใหน กั ศกึ ษาสรา งตารางดงั นี้ ตารางขายสนิ คา ลําดบั ช่ือสนิ คา จาํ นวน ราคา 1 2 3 4 รวมเปนเงนิ
The HTML Style Attribute <tagname style=\"property:value;\"> ตัวอยา ง <p style=\"color:red\">I am a paragraph.</p>
The style Attribute <!DOCTYPE html> <html><body> <h2>The style Attribute</h2> <p>The style attribute is used to specify the styling of an element, like color:</p> <p style=\"color:red\">I am a paragraph.</p> </body> </html>
<!DOCTYPE html> <html><body> <p>I am normal</p> <p style=\"color:red;\">I am red</p> <p style=\"color:blue;\">I am blue</p> <p style=\"font-size:50px;\">I am big</p> </body></html>
HTML Background Color <!DOCTYPE html> <html> <body style=\"background-color:powderblue;\"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body></html>
HTML Text Color <!DOCTYPE html> <html><body> <h1 style=\"color:blue;\">This is a heading</h1> <p style=\"color:red;\">This is a paragraph.</p> </body></html>
HTML Fonts <!DOCTYPE html> <html><body> <h1 style=\"font-family:verdana;\">This is a heading</h1> <p style=\"font-family:courier;\">This is a paragraph.</p> </body></html>
HTML Text Size <!DOCTYPE html> <html><body> <h1 style=\"font-size:300%;\">This is a heading</h1> <p style=\"font-size:160%;\">This is a paragraph.</p> </body></html>
HTML Text Alignment <!DOCTYPE html> <html><body> <h1 style=\"text-align:center;\">Centered Heading</h1> <p style=\"text-align:center;\">Centered paragraph.</p> </body> </html>
The title Attribute <!DOCTYPE html> <html> <body> <h2 title=\"I'm a header\">The title Attribute</h2> <p title=\"I'm a tooltip\"> Mouse over this paragraph, to display the title attribute as a tooltip. </p></body></html>
Bigger Headings <!DOCTYPE html> <html><body> <h1 style=\"font-size:60px;\">Heading 1</h1> <p>You can change the size of a heading with the style attribute, using the font-size property.</p> </body></html>
<abbr> กําหนดคํายอหรือตวั ยอ <address> กาํ หนดขอมลู การตดิ ตอ สาํ หรับผเู ขียน / เจาของเอกสาร <bdo> กําหนดทิศทางขอ ความ <blockquote> กาํ หนดสวนทยี่ กมาจากแหลงอ่นื <cite> ระบุช่อื งาน <q> แสดงเครอ่ื งหมายคาํ พูด
HTML Colors รูปแบบสีแบบพิเศษ ใน HTML ที่เพม่ิ ขน้ึ
<html><body> <h1 style=\"background-color:Tomato;\">Tomato</h1> <h1 style=\"background-color:Orange;\">Orange</h1> <h1 style=\"background- color:DodgerBlue;\">DodgerBlue</h1> <h1 style=\"background- color:MediumSeaGreen;\">MediumSeaGreen</h1> <h1 style=\"background-color:Gray;\">Gray</h1> <h1 style=\"background-color:SlateBlue;\">SlateBlue</h1> <h1 style=\"background-color:Violet;\">Violet</h1> <h1 style=\"background- color:LightGray;\">LightGray</h1> </body></html>
<html><body> <h3 style=\"color:Tomato;\">Hello World</h3> <p style=\"color:DodgerBlue;\">test1</p> <p style=\"color:MediumSeaGreen;\">test2</p> <h1 style=\"border: 2px solid Tomato;\">Hello World</h1> <h1 style=\"border: 2px solid DodgerBlue;\">Hello World</h1> <h1 style=\"border: 2px solid Violet;\">Hello World</h1> </body></html>
Color Values ตัวอยางการบอกคา สเี ปนระดับหมายเลขของโหมดสตี างๆ <h1 style=\"background-color:rgb(255, 99, 71);\">...</h1> <h1 style=\"background-color:#ff6347;\">...</h1> <h1 style=\"background-color:hsl(9, 100%, 64%);\">...</h1> <h1 style=\"background-color:rgba(255, 99, 71, 0.5);\">...</h1> <h1 style=\"background-color:hsla(9, 100%, 64%, 0.5);\">...</h1>
HSL Value hsl(hue, saturation, lightness) Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
Saturation Saturation can be described as the intensity of a color. 100% is pure color, no shades of gray 50% is 50% gray, but you can still see the color. 0% is completely gray, you can no longer see the color.
Lightness The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).
Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades:
RGBA Value RGBA is specified with: rgba(red, green, blue, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
HSLA Value hsla(hue, saturation, lightness, alpha)
HTML <blockquote> for Quotations <p>Here is a quote from WWF's website:</p> <blockquote cite=\"http://www.worldwildlife.org/who/index.html\"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>
Search
Read the Text Version
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
