XHTML Tutorial

Introduction XHTML is really the future of the internet.
It is the newest generation of HTML (comming after HTML 4) but has many new features which mean that it is, in some ways, like XML. What is XHTML XHTML stands for eXtensable HyperText Markup Language and is a cross between HTML and XML. XHTML was created for two main reasons: 1. To create a stricter standard for making web pages, reducing incompatibilities between browsers 2. To create a standard that can be used on a variety of different devices without changes The great thing about XHTML, though, is that it is almost the same as HTML, although it is much more important that you create your code correctly. You cannot make badly formed code to be XHTML compatible. Unlike with HTML (where simple errors (like missing out a closing tag) are ignored by the browser), XHTML code must be exactly how it is specified to be. This is due to the fact that browsers in handheld devices etc. don't have the power to show badly formatted pages so XHTML makes sure that the code is correct so that it can be used on any type of browser.
XHTML is a web standard which has been agreed by the W3C and, as it is backwards compatible, you can start using it in your web pages now. Also, even if you don't think its really necessary to update to XHTML yet, there are three very good reasons to do so:
1. It will help you to create better formatted code on your site 2. It will make your site more accessable (both in the future and now due to the fact that it will also mean you have correct HTML and most browsers will show your page better) 3. XHTML is planned to replace HTML 4 in the future
The Main Changes There are several main changes in XHTML from HTML:

All tags must be in lower case All documents must have a doctype All documents must be properly formed All tags must be closed All attributes must be added properly The name attribute has changed Attributes cannot be shortened All tags must be properly nested
TheDoctype
Allthough this was optional in HTML, XHTML requires you to add a Doctype. There are three available for use.
Strict - This is used mainly when the markup is very clean and there is no 'extra' markup to aid the presentation of the document. This is best used if you are using Cascading Style Sheets for presentation. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Transitional - This should be used if you want to use presentational features of HTML in your page. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w 3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Frameset This should be used if you want to have frames 1.0 on your page.
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> The doctype should be the very first line of your document and should be the only thing on that line. Doctype is actually a comment tag. It is used to find out the code which the page is written in, but only by browsers/validators which support it, so this will cause no problems.
XHTML Tags
Introduction
One of the major changes to HTML which was introduced to XHTML is that tags must always be properly formed. With the old HTML specification you could be very sloppy in your coding, with missing tags and incorrect formation without many problems but in XHTML this is very important.
Lowercase
Probably the biggest changes in XHTML is that now not only the tags you use but, the way in which you write them must be correct. Luckily the major change can be easily implemented into In a XHTML, normal tags HTML must always document be lower without case. much This problem. means that:
<FONT> <Font> <FoNT> are all incorrect tags and must not be used. The font tag must now be used as follows: <font> If you are not writing your code, but instead use a WYSIWYG editor, you can still begin to migrate your documents to XHTML by setting the editor to output all code in lower case. For example, Edit and in -> making sure Dreamweaver 4 you can -> For do this Code Tags is set by going to:
Preferences that Case
Format to:
<lowercase> and also that Case For Attributes is set to:
lowercase="value"
Nesting
The second change to the HTML tags in XHTML is that they must all be properly nested. This means that if you have multiple tags applying to something on your page you must make sure you open and close them in the correct order. For example if you have some bold red text in a paragraph, <p><b><font <b><p><font <p><font the correct nesting would be one of the following:
color="#FF0000">Your color="#FF0000">Your color="#FF0000"><b>Your
Text</font></b></p> Text</font></p></b> Text<b></font></p>
These are only examples, though, and there are other possibilities for these tags. What you must not do, though, is to close tags in the wrong order, for example:
<p><b><font
color="#FF0000">Your
Text</p></font></b>
Although code in this form would be shown correctly using HTML, this is incorrect in the XHTML specification and you must be very careful to nest your tags correctly.
ClosingTags
The previous two changes to HTML should not be a particular problem to you if your HTML code is already well formed. The final change to HTML tags probably will require quite a lot of changes to your HTML documents to make them XHTML compliant.
All tags in XHTML must be closed. Most tags in HTML are already closed (for example <p></p>, <font></font>, <b></b>) but there are several which are standalone tags which do not <br> <img> <hr> There are two ways in which you can deal with the change in specification. The first way is quite obvious if you know HTML. You can just add a closing tag to each one, e.g. <br></br> get closed. The main three are:
<img></img> <hr></hr> Although you must be careful that you do not accidentally place anything between the opening and closing tags as this would be incorrect coding. The second way is slightly different but will be familiar to anyone who has written WML. You can include the closing in the actual tag: <br/> <img/> <hr/> This is probably the best way to close your tags, as it is the recommended way by the W3C who set the XHTML standard. You should notice that, in these examples, there is a space before the />. This is not actually necessary in the XHTML specification (you could have <br/>) but the reason why I have included it is that, as well as being correct XHTML, it will also make the tag compatible with past browsers. As every other XHTML change is backwards compatible, it would not be very good to have a simple missed out space causing problems with In site case compatibility. youarewonder
ing how the <img> tag works if it has all the normal attributes included, here is an example: <img src="myimage.gif" alt="My Image" width="400" height="300" />
What is XHTML Namespace?
http://www.webheadstart.org/xhtml/why.aspx
Namespaces are unique identifiers used in XML to differentiate between different markup languages. Each markup language, such as XHTML, has a namespace, for example, http://www.w3.org/1999/xhtml is the XHTML namespace. Namespace uses the xmlns attribute, which contains the namespace value. Example : 1
XHTML pages begin with a DOCTYPE declaration to specify what version of XHTML you are using. The DOCTYPE (document type) tells browsers what type of information to expect in the page, which in turn, tells it how to render the page. The DOCTYPE information is also used by XHTML validators to configure the process by which it verifies the syntax of your Web pages. An XHTML example file using the transitional flavor is shown here:
1. 2. 3. 4. 5. 6. 7. 8.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> (Your XHTML page contents goes here - we'll cover this next.) </html> Start by typing the XML declaration: <?xml version="1.0" encoding="UTF-8"? This is a processing instruction used to declare to the world that this document is an
>.
XML document which uses the UTF-8 (Unicode) character encoding. Note that the XML declaration is optional in XHTML. Next comes the XHTML transitional DOCTYPE declaration which declares the conformance level of the page. The <html xmlns="http://www.w3.org/1999/xhtml"> line opens the XHTML document and declares the default namespace - we'll learn more about XML namespaces in the XML tutorial section; for now just copy and paste that line. later. At the end of the page is the </html> tag which ends the XHTML example. Next comes the rest of your XHTML page - we'll be discussing what to put here
XHTML Tips and Tricks
XHTML documents start with an <html> tag - there is no such thing as an <xhtml> tag. It is required that you declare the XHTML namespace inside the opening <html> tag. This XHTML example covered the use of XHTML transitional - for XHTML strict or frameset, use the appropriate DOCTYPE Declaration. Remember that declaring a DOCTYPE with a valid identifier at the top of an XHTML page puts most browers in standards mode- so remember not to use old browser hacks, and non-standard tags. (Otherwise, use just use regular HTML)
For some browsers, including Microsoft Internet Explorer 6, if you start an XHTML page with the XML declaration, the browser goes into quirks mode, an unfortunate bug. The workaround is to delete the optional declaration and declare the the encoding using a meta tag.
The DOCTYPE declaration has to be in all uppercase characters, just like in the XHTML example code.
XHTML vs HTML- Why use XHTML?

Differences Between XHTML and HTML Both HTML 4 and XHTML 1.0 use precisely the same elements, attributes, and values. The difference between HTML and XHTML is in their respective syntax - the main differences are discussed in this section.
XHTML requires that all Web pages contain the <html>, <head>, and <body> elements, as well as the DOCTYPE declaration, where as in HTML they are not required.
XHTML insists on having closing tags for every element, even empty ones, where as HTML often lets you omit them. HTML requires that all attributes be enclosed by quotation marks, where as HTML lets you omit quotation marks, but only around attribute values which consist of only letters, numbers and these characters: - (dash), . (period), _ (underscore) and : (colon).
XHTML is case sensitive, where as HTML is not case sensitive. Furthermore XHTML requires that all enumerated attribute values be lower case.
Why use XHTML? XHTML's more strict syntax rules has many benefits. By adhering to a more consistent, well structured format, your web pages can be easily parsed and processed by software applications. It also makes your website more easy to maintain, edit, convert and format in the long run. XHTML adopts official XML standard syntax, and is a newer technology with many benefits. Alternate ways of accessing the Internet are constantly being introduced. The XHTML family is designed with general user agent interoperability in mind, such as mobile devices, new Web browser software, etc. Since XHTML is an official standard of the World Wide Web Consortium (W3C), your website will more likely render correctly in more browsers then should you choose to use non-standard HTML tag sets, which reduces site maintenance work, and improves the overall usability of your site. Finally, Document developers and user agent designers are constantly discovering new ways to express their ideas through new markup. In XML, it is relatively easy to introduce new elements or additional element attributes. The XHTML family is designed to accommodate these extensions through XHTML modules and techniques for developing new XHTML-conforming modules (described in the XHTML Modularization specification). These modules will permit the combination of existing and new feature sets when developing content and when designing new user agents.
XHTML Basics
The XHTML Foundation
http://www.webheadstart.org/xhtml/div.aspx
XHTML pages can be divided into two sections: the head and the body. The head section is where you define the title of your page, write scripts, associate style sheets, and include meta information which describes the contents of your page to search engines, etc. The
body of your XHTML document encloses the content of your page, i.e. the stuff that your visitors will see and read, like graphics and text. Here's what the XHTML code looks like:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3. <html xmlns="http://www.w3.org/1999/xhtml"> 4. <head> 5. (Insert the page's head information here ...) 6. </head> 7. <body> 8. (Insert the page's body content here ...) 9. </body> 10. </html>
Let's take a moment to review the basic syntax for the XHTML foundation. Creating the XHTML <head> element or headers XHTML provides six built-in levels of headers (headings) to help you organize and layout the contents of your Web page in a structured manner. Here is an example of using XHTML headers:
1. <h1>The 2004 Baseball ALCS Players Roster</h1> 2. <h2>Boston RedSox</h2> 3. <h3>Bronson Arroyo</h3> 4. <h3>Tim Wakefield</h3> 5. ... 6. <h2>New York Yankees</h2> 7. <h3>Derek Jeter</h3> 8. <h3>Alex Rodriguez</h3> 9. ...
Immediately after the opening <html> element, type the <head> tag. Insert the contents of the <head> section Type </head> to close the element. The higher the level of a header (i.e. the smaller the number), the more prominently they are displayed on the page. Typically, browsers default to Times New Roman, bold face, at 24, 18, 14, 12, 10 and 8 pixel font, respectively - you can always use a css stylesheet to override these default settings. Headers are hierarchical - they give your document structure, like a table of contents. You can nest them, with bigger headings on the outside, and smaller headings on the inside. XHTML headings are block-level elements - i.e., their contents automatically start on a new line.
Creating the XHTML <body> element
Under the closing </head> tag, open the <body> element.
Insert the contents of the <body> section again. Type </body> to close the body tag.
Creating the XHTML <title> element XHTML pages are not very useful without a meaningful title. All XHTML pages require a <title> element - we recommend that you choose something short and descriptive, since in most browsers, the title is rendered in the browser's title bar, which has limited space. Here is an example of the <title> element:
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Learning the XHTML Basics</title> </head>
To create a title element:

Type <title> anywhere between the opening and closing <head> tags. Enter the name of your web page. Type </title> to close the title.
XHTML file encoding XHTML files, along with any other text files, are saved using a particular character encoding. Since there are many different character encoding in the world, and you have no idea what your visitor's browser default settings are, it's always a good idea to explicitly declare which encoding you used to make your Web page. Here's an example of how to declare the character encoding, in this case, the Unicode encoding is used:
Code Sample
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </head>
When a browser sees this <meta> tag, it will know that the page was encoded using UTF-8, and will display properly (provided that you really did encode the page in UTF-8).
XHTML requires that you declare the encoding if it is anything other then the default UTF8 or UTF-16 encodings. You can also use the XML Declaration to specify character encodings. Some character encodings are almost identical. XHTML files, along with any other text files, are saved using a particular character encoding. Since there are many different character encoding in the world, and you have no idea what your visitor's browser default settings are, it's always a good idea to explicitly declare which encoding you used to make your Web page. Here's an example of how to declare the character encoding, in this case, the Unicode encoding is used. XHTML Comments

Start the comment by typing "" to close the comment tag.
XHTML comments can be used anywhere in a Web page to help the author(s) understand the source code - they remain invisible to the web page viewer. Here are some common usages and ticks:
Comments are particularly useful for describing what you are working on in advanced HTML layouts, or for describing unfinshed work in progress. You can use an XHTML comment to temporarily remove an entire section from a page. Comments are not invisible to the public, they are simply not rendered by a Web browser. It's very easy for anyone to view the XHTML source and read your comments, so don't write any sensitive information like passwords in a comment field.
Comments may not have nested comments. XHTML comments are a handy way to keep track of different revisions.
XHTML Div - Breaking up a Page Into Divisions
XHTML Div Tutorial To break up a page into different divisions, follow these steps:

At the start of the division, type "<div" Optionally type in id="name", where name uniquely identifies the division. Optionally type in class="name", where name corresponds to the name of the class that the division belongs to. Type ">" to complete the opening div tag. Create the contents of the division. Complete the division by typing "</div>"
Tips and Tricks on How to use the XHTML Div Tag
A division is a block-level element - i.e., its contents automatically start on a new line. id and class are optional attributes used to label your divisions, which can be used with CSS to create powerful page layouts. The main difference between an id and a class is that class is for a group of elements while id is for identifying unique, individual elements. You can nest div's - in the XHTML div example, an outer div with id="pagecontents" enclosed three nested div's. Don't use tables to lay out your HTML pages - use div and span instead! That's the XHTML way!
XHTML <div> Example Here's an example XHTML code fragment that shows a very typical use of the div tag, used to structure the various parts of a webpage:
Code Sample:
<div id="pagecontents"> <div class="leftnavigation"> <h3>
Learning HTML</h3> <h3> Learning XHTML</h3> <h3> Learning CSS</h3> </div> <div class="centercolumn"> <h1> Tables are Dead! Use <div/>'s and CSS Instead</h1> <p> Div and Span tags along with CSS are the greatest invention since sliced bread.</p> </div> <div class="rightcallout"> <h3> Did you Know?</h3> <p> The XHTML Div tag simplifies advanced page layouts</p> </div> </div>
XHTML Span - Creating Inline Spans

The XHTML span tag allows you to further organize your page's content into smaller chunks or spans of information. By naming spans of text, you can use Cascading Style
Sheets (CSS) to apply styles to those regions in a global manner. The XHTML span tag simplifies the development of advanced layouts by further decoupling a page's content from its' presentation on a more granular level. XHTML <span> Example Here's an example XHTML code fragment that shows a typical use of the span tag, used to apply various formatting to certain in-line aspects of a page's contents:
1. 2. 3. 4. 5. 6. 7. 8. 9.
<p> The XHTML span tag is useful for applying inline styles such as a different font <span style="font-size: large;">size</span> or <span style="color: red;">color</span> to your content. </p> <p> You'll find that the span tag is <span style="font-style: italic;"> very</span>helpful in maintaining consistent styles across your site. </p>
The preceeding XHTML span example shows how you might use span tags to mark up certain aspects of a page, for example, code fragments, which might be displayed using a monospace font like courier new -- or to bring attention to certain key words that might require special emphasis, for example, through the application of an underline, bold, or larger font face. Every enclosed <span> references either a class or an id, which corresponds to a particular style defined in a stylesheet somewhere else - typically in a separate file. Using XHTML span you could then update your styles for code text, or emphasis text, or whatever, simply by updating a single stylesheet, rather then manually going through all of your documents, which is more managable and saves time. XHTML Span Tutorial To break up a page into different divisions, follow these steps:

At the start of the division, type "<span" Optionally type in id="name", where name uniquely identifies the span of content. Optionally type in class="name", where name corresponds to the name of the class that the span belongs to. Type ">" to complete the opening span tag. Type in the contents of the span. Complete the span typing "</span>"
Tips and Tricks on How to use the XHTML Span Tag
A span tag has no inherent formatting - you need to associate it with a particular style defined elsewhere, using the class or id attribute.
The difference between id and class is that id is for identifying individual, unique elements, where as class is used for a group of elements. We'll learn how to use span with CSS later in the CSS tutorial section. Don't use font tags to style inline elements - use span tags instead! That's the XHTML way!
chapter 1
Introduction Differences between HTML and XHTML Document Structure Basic Tags in XHTML Examples
Introduction to XHTML
Formatting
Introduction Heading Tags Paragraph Tag Line Break Horizontal Rule Tag Font Style Tags Example of tags explained above Phrase Tags Preformatted Text Tag
chapter 2
Abbreviations Tag Address Tag Blockquote Tag Example of tags explained above Lists List Index Tag Unordered Lists Ordered Lists Example of Lists
Links
Introduction URL Relative Pathnames Absolute Path
chapter 3
Linking Anchor Tag Example
Images
Introduction Image Tag Example of tags explained above
chapter 4
Map Tag Area Tag
Forms
Introduction Form Tag Input Tag Examples of tags explained
chapter 5
Optgroup Tag Button Tag Label Tag Textarea tag
above Option Tag Select Tag Examples of tags explained above
Tables
Introduction Table Tag Tr Tag Td Tag Th Tag
chapter 6
Example of tags explained above Caption Tag Col Tag Colgroup Tag Example Of tags explained above
Frames
Introduction Frame Tag Frameset Tag
chapter 7
Noframes Tag Iframe tag Example Of tags explained above
Style Sheets
Introduction Benefits of Style Sheets Rules for Style Sheets External Style Sheet Internal Style Sheet Inline Styles Link Tag
chapter 8
Style Tag Div Tag Span Tag Introduction to JavaScript Script Tag Noscript Tag Example of tags explained above
Advanced Tags
Meta Tag
chapter 9
Example of tags explained above
XHTML Basic tags: Example  Example <html>
<head> <title> My bag of jokes </title> </head> <body>  Hello, this is My Jokes website. Now you will read some rib-tickling Jokes. These jokes are meant for people of all ages. Some of them are good, they will have you in splits. </body> </html> XHTML Links: Example <html> <head> <title> My list of jokes </title> </head> <body> <h1>This is my list of jokes </h1> <ul> <li>Classic jokes </li> <li>Math jokes </li> <li>Food jokes</li> </ul> <hr/> <ol> <li>Crazy jokes</li> <li>Ethnic jokes</li> <li>Golf jokes</li> </ol> <hr/> <A A href="http://expertrating.com/" target="_blank"> Link to expertrating </A>
</body> </html> XHTML Images:

Example
<html> <head> <title> My list of jokes </title> </head> <body> <h1>This is my list of jokes </h1> <ul> <li>Classic jokes </li> <li>Math jokes </li> <li>Food jokes</li> </ul> <hr/> <ol> <li>Crazy jokes</li> <li>Ethnic jokes</li> <li>Golf jokes</li> </ol> <hr/> <img src="image1.jpg" alt="my image" height=100 width=100/> </body> </html> XHTML Forms: Example <html> <head> <title> My list of jokes </title> </head> <body>
<h1> My Registration Page </h1> <form name="registration" action="http://expertrating.com/registration.html"> First name: <input type=text name="realname" /> <br/> Last name: <input type=text name="sirname" /> <br/> Password: <input type=password name="pass"/> <br/> Re-Type Password: <input type=password name="repass"/> <h2>Additional Information </h2> SEX<br/> <select name="sex"> <option value="001"> Male </option> <option value="002"> Female </option> </select><br/> SELECTION OF JOKES<br/> <select name=jokenumber> <optgroup label=Game jokes> <option value=001> Cricket jokes </option> <option value=002> Golf jokes </option> </optgroup> <optgroup label=Other jokes> <option value=111> Classic jokes </option> <option value=112> Short jokes </option> </optgroup> </select><br/> <label for=moreinfo> Do you want more information on jokes? </label> <input type=checkbox name=moreinfo id=moreinfo /><br/><br/> Enter your comments: <textarea name=comments cols=40 rows=3 wrap=soft> </textarea><br/><br/> <button type=reset> Reset </button><br/> <button type=submit>Send This </button> </form> </body> </html>
XHTML Tables:
Example
<html> <head> <title> My list of jokes </title> </head> <body> <h1> Some More Tables </h1>
<table border=3 cellpadding=4 bordercolor="blue"> <caption><b> Good Jokes </b></caption> <col align=right> </col> <col bgcolor="#CCFF99"> </col> <tr><th> Joke Type </th> <th> Joke </th> </tr> <tr><td>1.</td> <td bordercolor=red> Classic Jokes </td> <tr><td>2.</td> <td bordercolor=red> Tennis Jokes </td> <tr><td>3.</td> <td bordercolor=red> Cricket Jokes </td> </table> <br/> <br/> <h2> Let's read a joke!</h2> <table border=3 cellpadding=4 bordercolor="blue"> <colgroup span=2 align=center bgcolor="#CCFF99"> </colgroup> <tr> <th> Joke Type</th> <th> Joke </th> </tr> <tr> <td>Blonde Joke </td> <td> A brunette says to a blonde, "Look! A dead bird!" and the blonde looks up and says, "Where?"</td> </tr> </table> </body> </html>
XHTML Tutorial Style Sheets

Page 5 of 5 This is how the web page looks:
XHTML Meta tags: Example <html> <head> <title> My list of jokes </title> <meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML">
</head> <body> <h1> My Registration Page </h1> <form name="registration" action="http://expertrating.com/registration.html"> First name: <input type=text name="realname" /> <br/> Last name: <input type=text name="sirname" /> <br/> Password: <input type=password name="pass"/> <br/> Re-Type Password: <input type=password name="repass"/> <h2>Additional Information </h2> SEX<br/> <select name="sex"> <option value="001"> Male </option> <option value="002"> Female </option> </select><br/> SELECTION OF JOKES<br/> <select name=jokenumber> <optgroup label=Game jokes> <option value=001> Cricket jokes </option> <option value=002> Golf jokes </option> </optgroup> <optgroup label=Other jokes> <option value=111> Classic jokes </option> <option value=112> Short jokes </option> </optgroup> </select><br/> <label for=moreinfo> Do you want more information on jokes? </label> <input type=checkbox name=moreinfo id=moreinfo /><br/><br/> Enter your comments: <textarea name=comments cols=40 rows=3 wrap=soft> </textarea><br/><br/> <button type=reset> Reset </button><br/> <button type=submit>Send This </button> </form>
</body> </html>
This is how the web page will look:
HTML XHTML Table Code Tutorial

Before we begin, tables are supposed to structure tabular data, and not for web page layouts. You can learn how to make web page layouts using CSS. I will first show you how to create a table and then I will explain HTML code example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> </head> <body> <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </body> </html> The above HTML code example makes the following table. 1 2 3 4 5 6 The <table> element defines the table. The <tr> element defines a table row. Notice that there are 2 <tr> elements in the above example and there are 2 table rows. The <td> element defines a data cell, which must be enclosed in <tr> tags. Notice that there are 6 <td> tags in the example and that there are 6 data cells in the table. The width of the border of the table can be specified in the openning <table> tag using the border attribute. If you specify that the border be zero (0), the table will not have a border at all. The HTML code below shows you how to make another table, this one with only 1 row, 2 cells and no border. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title>
</head> <body> <table border="0"> <tr> <td>1</td> <td>2</td> </tr> </table> </body> </html> The above HTML code makes the table below. 12 Make a table by entering the HTML code in the textbox below.
Edit the code and Click Here
Empty cells in a table

Table cells with no content in them may be displayed differently on different web browsers. To avoid this issue, add a non-breaking space ( ) to empty data cells, to make the borders visible. The below HTML code makes a table with an empty table cell. Notice that the last <td> tag is empty. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> </head> <body> <table border="1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3 </td> <td> </td> </tr>
</table> </body> </html> The above HTML code example makes the table below, which has an empty table cell. 1 2 3 The HTML code example below will make the same table as above, except that the HTML code has a non-breaking space ( ) added to the last <td> tag. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> </head> <body> <table border="1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3 </td> <td> </td> </tr> </table> </body> </html> 1 2 3 note: remember that some web browsers may display tables with empty cells the same as tables with no empty cells. The reason for adding the non-breaking space ( ) is to ensure that your tables appear the same in all web browsers.
How to add a caption to a table

The below HTML code example shows you how to add a caption to a table.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> </head> <body> <table border="1"> <caption> this is a caption </caption> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> </body> </html> The above HTML code makes the below table with a caption. this is a caption 1 2 3 4
Table cells that span more than one row/column

The below HTML code example shows you how to make a table with a cell that spans more than one column. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> </head> <body> <table border="1"> <tr> <td>AAAA</td> <td colspan="2">BBBB</td> </tr> <tr> <td>1111</td>
<td>2222</td> <td>3333</td> </tr> </table> </body> </html> The above HTML code makes the table below. AAAA BBBB 1111 2222 3333 The below HTML code example shows you how to make a table with a cell that spans more than one row. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> </head> <body> <table border="1"> <tr> <td>AAAA</td> <td>BBBB</td> </tr> <tr> <td rowspan="2">1111</td> <td>2222</td> </tr> <tr> <td>3333</td> </tr> </table> </body> </html> The above HTML code makes the table below. AAAA BBBB 1111 2222 3333
Try it yourself. Enter the HTML code in the textbox below to make a table with a cell that spans more one cell or column.
Edit the code and Click Here
cellspacing attribute
The cellspacing attribute allows you to define the distance between cells in a table. The below HTML code example shows you how to define the distance between cell using the cellspacing attribute. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> </head> <body> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> The above HTML code example makes the table below. First Second Row Row
Frame Attribute
The frame attribute allows you to control the borders around a table. The HTML code examples below show you how to use the frame attribute. If you do not see any frames around the tables below, your web browser does not support the use of the frame attribute and/or may be too old.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> </head> <body> <table frame="border"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> The above HTML code makes the table below. First Row Second Row The HTML code example below is a table with a frame attribute with a value of "box". <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> </head> <body> <table frame="box"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
The above HTML code makes the table below. First Row Second Row The HTML code example below is a table with a frame attribute with a value of "void". <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> </head> <body> <table frame="void"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> The HTML code above makes the table below. First Row Second Row The HTML code example below is a table with a frame attribute with a value of "above". <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> </head> <body> <table frame="above"> <tr> <td>First</td> <td>Row</td> </tr>
<tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> The HTML code example above makes the table below. First Row Second Row The HTML code example below is a table with a frame attribute with a value of "below". <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> </head> <body> <table frame="below"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> The HTML code example above makes the table below. First Row Second Row The HTML code example below is a table with a frame attribute with a value of "hsides". <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<title>this is the title of the web page</title> </head> <body> <table frame="hsides"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> The HTML code example above makes the table below. First Row Second Row The HTML code example below is a table with a frame attribute with a value of "vsides". <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> </head> <body> <table frame="vsides"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> The HTML code example above makes the table below. First Row Second Row
The HTML code example below is a table with a frame attribute with a value of "lhs". <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> </head> <body> <table frame="lhs"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> The HTML code example above makes the table below. First Row Second Row The HTML code example below is a table with a frame attribute with a value of "rhs". <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>this is the title of the web page</title> </head> <body> <table frame="rhs"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
</body> </html> The HTML code example above makes the table below. First Row Second Row

XHTML Tutorial

Загружено:

Сведения о документе

Исходное описание:

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

XHTML Tutorial

Загружено:

Авторское право:

Доступные форматы

Introduction XHTML is really the future of the internet.

Preferences that Case

<lowercase> and also that Case For Attributes is set to:

color="#FF0000">Your color="#FF0000">Your color="#FF0000"><b>Your

Text</font></b></p> Text</font></p></b> Text<b></font></p>

What is XHTML Namespace?

XHTML Tips and Tricks

XHTML vs HTML- Why use XHTML?

Creating the XHTML <body> element

Under the closing </head> tag, open the <body> element.

To create a title element:

XHTML Div - Breaking up a Page Into Divisions

Tips and Tricks on How to use the XHTML Div Tag

XHTML Span - Creating Inline Spans

Tips and Tricks on How to use the XHTML Span Tag

above Option Tag Select Tag Examples of tags explained above

XHTML Basic tags: Example  Example <html>

</body> </html> XHTML Images:

XHTML Tutorial Style Sheets

HTML XHTML Table Code Tutorial

Edit the code and Click Here

Empty cells in a table

How to add a caption to a table

Table cells that span more than one row/column

Edit the code and Click Here

Вам также может понравиться