Cell padding (control the white space between cell content and the borders <html> <body>

<h4>Without cellpadding:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>

<h4>With cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr>

</table>

</body> </html>

Output

Without cellpadding: First Row

Second Row With cellpadding: First Second Row Row

Cell spacing (control the distance between cells <html> <body>

<h4>Without cellspacing:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>

<h4>With cellspacing:</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr>

</table>

</body>

</html>Without cellspacing: First Row

Second Row With cellspacing: First Row

Second Row

Different table borders <html> <body> <h4>With a normal border:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With a thick border:</h4> <table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> .

</table> <h4>With a very thick border:</h4> <table border="15"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> With a normal border: First Row Second Row With a thick border: First Row Second Row With a very thick border: First Row .

com/images/w3schools_green.jpg" alt="W3Schools.gif" alt="Google Chrome" width="33" height="32" /> <p>An image from W3Schools:</p> <img src="http://www.com" width="104" height="142" /> </body> </html> An image from another folder: An image from W3Schools: Insert images .Second Row Insert images from another folder or another server <html> <body> <p>An image from another folder:</p> <img src="/images/chrome.w3schools.

</p> </bod > </html> An i : A moving image: Note t at t e syntax of inserting a moving image is no different from a non -moving image.gif" alt="Compute man" width="48" height="48" /> </p> <p> Note that the s ntax of inse ting a mo ing image is no diffe ent f om a non-mo ing image. ¦ ¤ ¤ £ ¤ ¦ ¡   ¤ £ ¡   ¥¤ £  £¢  ¡ £ ¦ ¤ ¡ ¡   e: . if" alt="S ile face" width="32" hei ht="32" /> </p> <p> A mo in image: <img s c="hackanm.<ht l> <bod > <p> An i <i s ="s ile .

Simple tables <html> <body> <p> Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag. </p> <h4>One column:</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>One row and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> .

<h4>Two rows and three columns:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> Each table starts with a table tag. Each table data starts with a td tag. One column: 100 One row and three columns: 100 200 300 Two rows and three columns: 100 200 300 400 500 600 . Each table row starts with a tr tag.

Table cells that span more than one row-column <html> <body> <h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> .

<td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html> Cell that spans two columns: Name Telephone Bill Gates 555 77 854 555 77 855 Cell that spans two rows: First Name: Bill Gates Telephone: 555 77 854 555 77 855 Table headers <html> <body> <h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> .

<th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table> </body> </html> .

Table headers Name Telephone Telephone Bill Gates 555 77 854 555 77 855 Vertical headers: First Name: Bill Gates Telephone: 555 77 854 Telephone: 555 77 855 Table with a caption <html> <body> <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> .

</body> </html> Monthly savings Month Savings January $100 February $50 Tables without borders <html> <body> <h4>This table has no borders:</h4> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> .

<h4>And this table has no borders:</h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> This table has no borders: 100 200 300 400 500 600 And this table has no borders: 100 200 300 400 500 600 Tags inside a table <html> .

<body> <table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> .

</p> .gif" alt="Smiley face" align="middle" width="32" height="32" /> with align="middle".</ul> </td> <td>HELLO</td> </tr> </table> </body> </html> This is a paragraph This cell contains a table: A B This is another paragraph C D This cell contains a list y y y apples bananas pineapples HELLO Aligning an image <html> <body> <p>An image <img src="smiley.</p> <p>An image <img src="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32" /> with align="bottom".

<p>An image <img src="smiley.</p> <p>An image after the text.gif" alt="Smiley face" width="32" height="32" /> An image before the text.</p> <p><b>Tip:</b> align="bottom" is default!</p> <p><img src="smiley. Tip: align="bottom" is default! An image before the text. An image after the text. with align="top". <img src="smiley. Create an image-map with clikable regions <html> .gif" alt="Smiley face" width="32" height="32" /></p> </body> </html> An image An image An image with align="bottom". with align="middle".gif" alt="Smiley face" align="top" width="32" height="32" /> with align="top".

58.82.htm" /> <area shape="circle" coords="90.0.htm" /> </map> </body> </html> Click on the sun or on one of the planets to watch it closer: Insert image from another folder or another server <html> <body> .126" alt="Sun" href="sun.<body> <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.3" alt="Mercury" href="mercur.8" alt="Venus" href="venus.htm" /> <area shape="circle" coords="124.58.gif" width="145" height="126" alt="Planets" usemap="#planetmap"/> <map name="planetmap"> <area shape="rect" coords="0.

com/images/w3schools_green.jpg" alt="W3Schools.w3schools.gif" alt="Google Chrome" width="33" height="32" /> <p>An image from W3Schools:</p> <img src="http://www.com" width="104" height="142" /> </body> </html> An image from another folder: An image from W3Schools: Insert images <html> <body> <p> An image: .<p>An image from another folder:</p> <img src="/images/chrome.

gif" alt="Compute man" width="48" height="48" /> </p> <p> Note that the s ntax of inse ting a mo ing image is no diffe ent f om a non-mo ing image.<img s c="smile . Note t at t e syntax of inserting a moving image is no different from a non Let the image float to left right of the paragraph <html> <bod > <p> © § § § © ¨ § ¨ ¨ § § ¨ © ¨ .gif" alt="Smile face" width="32" height="32" /> </p> <p> A mo ing image: <img s c="hackanm. </p> </bod > </html> An image: A moving image: -moving image.

The align attribute of the image is set to "left". The image will float to the left of this text. The align attribute of the image is set to "right". The align attribute of the image is set to "right". </p> <p> <img src="smiley.gif" alt="HTML tutorial" width="32" height="32" /> </a></p> .gif" alt="Smiley face" align="left" width="32" height="32" /> A paragraph with an image. </p> </body> </html> A paragraph with an image. The image will float to the right of this text. The align attribute of the image is set to "left".<img src="smiley. The image will float to the left of this text.gif" alt="Smiley face" align="right" width="32" height="32" /> A paragraph with an image.asp"> <img src="smiley. A paragraph with an image. Make an hyperlink of an image <html> <body> <p>Create a link of an image: <a href="default. The image will float to the right of this text.

</p> <p>This is a paragraph.</p> </body> </html> This is a paragraph. but still a link: Hyperlink <html> <body> <p>This is a paragraph. This is a paragraph.gif" alt="HTML tutorial" width="32" height="32" /> </a></p> </body> </html> Create a link of an image: No border around the image. but still a link: <a href="default.<p>No border around the image.</p> <p>This is a paragraph. . This is a paragraph.asp"> <img border="0" src="smiley.

com?cc=someoneelse@example.com&bcc=andsomeoneelse@e xample. </p> </body> </html> This is another mailto link: Send mail! Note: Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.Another mail to link <html> <body> <p> This is another mailto link: <a href="mailto:someone@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20sum mer%20party!">Send mail!</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly. Break out of a frame <html> <body> .

but still a link: <a href="default.gif" alt="HTML tutorial" width="32" height="32" /> </a></p> <p>No border around the image.w3schools.gif" alt="HTML tutorial" width="32" height="32" /> </a></p> </body> </html> .asp"> <img src="smiley.com/" target="_top">Click here!</a> </body> </html> Locked in a frame? Click here! Creat link of an image <html> <body> <p>Create a link of an image: <a href="default.asp"> <img border="0" src="smiley.<p>Locked in a frame?</p> <a href="http://www.

com!</a> <p>If you set the target attribute to "_blank". the link will open in a new browser window.</p> </body> </html> Visit W3Schools.Create a link of an image: No border around the image. How to create hyperlink <html> <body> <p> . but still a link: Open in a new browser <html> <body> <a href="http://www. the link will open in a new browser window.com! If you set the target attribute to "_blank".w3schools.com" target="_blank">Visit W3Schools.

</p> </body> </html> HTML Tutorial This is a link to a page on this website.com?Subject=Hello%20again"> Send Mail</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly. Google This is a link to a website on the World Wide Web.google.<a href="default. . How to link to a mail message <html> <body> <p> This is an email link: <a href="mailto:someone@example. </p> <p> <a href="http://www.asp">HTML Tutorial</a> This is a link to a page on this website.com/">Google</a> This is a link to a website on the World Wide Web.

</a> </p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2><a name="C4">Chapter 4</a></h2> . Jump to another part of a document <html> <body> <p> <a href="#C4">See also Chapter 4.</p> </body> </html> This is an email link: Send Mail Note: Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.

<p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 10</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 12</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 13</h2> .

Chapter 1 This chapter explains ba bla bla Chapter 2 This chapter explains ba bla bla Chapter 3 This chapter explains ba bla bla .<p>This chapter explains ba bla bla</p> <h2>Chapter 14</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 15</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 16</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 17</h2> <p>This chapter explains ba bla bla</p> </body> </html> See also Chapter 4.

Chapter 4 This chapter explains ba bla bla Chapter 5 This chapter explains ba bla bla Chapter 6 This chapter explains ba bla bla Chapter 7 This chapter explains ba bla bla Chapter 8 This chapter explains ba bla bla Chapter 9 This chapter explains ba bla bla Chapter 10 This chapter explains ba bla bla Chapter 11 This chapter explains ba bla bla Chapter 12 This chapter explains ba bla bla Chapter 13 This chapter explains ba bla bla Chapter 14 This chapter explains ba bla bla .

Milk An unordered list <html> <body> . Tea 3.Chapter 15 This chapter explains ba bla bla Chapter 16 This chapter explains ba bla bla Chapter 17 This chapter explains ba bla bla An ordered list <html> <body> <h4>An Ordered List:</h4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> An Ordered List: 1. Coffee 2.

<h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> An Unordered List: y y y Coffee Tea Milk Definition list <html> <body> <h4>A Definition List:</h4> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> .

</body> </html> A Definition List: Coffee Black hot drink Milk White cold drink Different types of ordered list <html> <body> <h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> .

</ol> <h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </body> .

C. III. Apples Bananas Lemons Oranges Lowercase letters list: a. iii. Apples Bananas Lemons Oranges Letters list: A. IV. c. 2. d. D. b. ii. Apples Bananas Lemons Oranges Different types of unordered list <html> <body> <h4>Disc bullets list:</h4> <ul type="disc"> . B. 3. Apples Bananas Lemons Oranges Roman numbers list: I. Apples Bananas Lemons Oranges Lowercase Roman numbers list: i. iv. II. 4.</html> Numbered list: 1.

<li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Circle bullets list:</h4> <ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Square bullets list:</h4> <ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html> Disc bullets list: .

y y y y Apples Bananas Lemons Oranges Circle bullets list: o o o o Apples Bananas Lemons Oranges Square bullets list:     Apples Bananas Lemons Oranges Nested list <html> <body> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> .

</ul> </li> <li>Milk</li> </ul> </body> </html> A nested List: y y Coffee Tea o o Black tea Green tea  China  Africa y Milk .

Sign up to vote on this title
UsefulNot useful