Tables in XHTML Tutorials : How to Add a Table to Your XHTML Document and What is the Table Structures, attributes, and layouts
Graphic Design Resources Directory: Directory of Graphics Software Tutorials and All Your Graphics and Graphic Design Needs


Creative Public - Creative Graphic Design Business Resources - Graphic Design Business Resources

 All Graphic Design Resources Directory now includes Original Graphic Design Articles, Links to Hand-Picked Graphics Software Resources, Desktop Publishing (DTP) Tools, & Links to Tutorials for Image Editing Graphics Software like Adobe Photoshop or QuarXpress. And visit our most popular pages - Printing Layout Templates, Graphics Software Information, Online Design Classes, Design Schools, Graphic Design Jobs, Design & Layout Articles. If you get lost, visit our Site Map.

AddThis Social Bookmark Button

Search Design Schools

Zip Code:



Online Campus Both

home > Web Design Tutorials > Programming Tutorials > XHTML Coding Tutorials > XHTML ATTRIBUTES TUTORIALS

XHTML TABLES TUTORIALS & ARTICLES: Links to Articles & Tutorials for XHTML Tables, including how to layout a table and what is the table structures & attributes.

It is a basic introduction to tables in XHTML, which covers how to construct a table and the options available with different properties.

What is a Table?
A table is a collection of information or data arranged into related columns and rows. The point of intersection of any given column and row is known as a cell.

xhtml table structure
You define a table by putting all elements you want in the table between the table and the corresponding /table tags.

xhtml Table Attributes
Any of the table tags can take the following attributes, which function in the same way as for all tags that accept them…

xhtml Table Spanning
One thing you may have discovered while looking at pages on the Web, is that not all tables are organized into nice neat grids. Some of them have different numbers of cells in different columns or in different rows. In other words, not all boxes are a perfectly symmetrical set of rectangles.

Using Tables for Layout
Tables can be a very useful tool for page layout, so long as they are used judiciously. See the next section for the things you should pay attention to when using tables for page payout.

Styling Tables
You can use either style sheets or attributes to style documents. Both have benefits and drawbacks. Style sheets have more flexibility and are in accord with new standards, but they are also not backwardly compatible. Many table attributes have been deprecated in favor of style sheets, and many only work in certain browsers, however, they are backwardly compatible.

Good Table Design
There are many issues that go into the design of tables. Unfortunately, most of them are ignored. Designers often feel they have carte blanche to use tables as they will to layout Web pages. In fact, some of the major WYSIWYG development software uses tables for exact positioning of elements on the page to the extent that every element in the page will be in its own table, nested inside other tables. This is not immediately apparent on a normal computer screen, but can cause problems for some users.

Tables arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. They're often used for page layout, but the trend now should be towards using style sheets for that. Using tables for layout may create problems when rendering to non-visual media. Also, when used with graphics or pre-formatted text, tables may force users to scroll horizontally.

Table Elements/Tags
Table tags are tags that define a table…


Probably everything you will ever need to know about tables in this tutorial. I am going to show you how to apply styles to them so you can have valid coding weather you are using HTML 4.01 Transitional / Strict or using XHTML.

XHTML tables are designed to hold tabular data, like this…

Tabular arrangements of data into rows and columns can help the viewer sort through masses of data to understand their underlying structure and content. So, tables are useful devices for presentation of information in a meaningful form. At the same time, tables can be used to structure the layout of a Web page regardless of its content. You can produce a variety of page designs simply by the designing different table structures into which your page information will fit. In short, tables are important presentation devices, and you need to know as much as you can about how to use them.

Table Borders
When a table is defined by a table tag with no styles specified, a borderless table as wide as its enclosed data is displayed.

Table Colors
Tables can have outer border colors and cell border colors. They can also have background colors, patterns, and graphic images as backdrops for the full table or within selected cells.

Table Groupings
When working with large tables with varying cell sizes, alignments, and colors you can bring a more orderly structure to the table by grouping columns and rows. In this fashion you can set structural and styling specifications for the groups and have those features propogate automatically across the individual cells contained within the groups.

For a language that emerged from academia -- a world steeped in data -- it's not surprising to find that HTML, and now its progeny XHTML, support a set of tags for data tables that not only align your numbers, but can specially format your text, too.

Table Tags
A wide variety of tables can be created with only five tags: the table tag, which encapsulates a table and its elements in the document's body content; the tr tag, which defines a table row; the th and td tags, which define the table's headers and data cells; and the caption tag, which defines a title or caption for the table. Beyond these core tags, you may also define and control whole sections of tables, including adding running headers and footers, with the colgroup, col, tbody, thead, and tfoot tags. Each tag has one or more required and optional attributes, some of which affect not only the tag itself, but also related tags.

How do I create tables directly in XHTML code?
Making tables in "raw" HTML or XHTML code can be rather tedious and error-prone, due to the large number of table cells and rows to be included. Even expert XHTML coders tend to resort to visual web editors such as Dreamweaver when they are required to create large tables. Nevertheless, the following is a brief overview...

Create Your First Table
There are three primary tags for use with a table…


AddThis Social Bookmark Button



We are looking for submissions of Graphic Design Tutorials and Articles from Knowledgeable Graphic Designers and Publishing Professionals. We will add a paragraph about your graphic design services (or other services as long as it is not offensive) along with your published article. We will add your contact information, including your graphic design business' website link, within this paragraph. gets around 16,000 Unique Visitors every day and this could mean a nice amount of traffic being sent to your graphics business' web site (or your graphic design portfolio). Find Out More Here



Please click here to visit our sponsor

Graphic Design Menu


OUR FRIENDS -- Adobe Photoshop Tutorials -- Photoshop, Flash, 3D Studio Max Tutorials -- Web Designers & Developers --Photoshop Tutorial Man -- Tutorial Guide -- Free Webmaster Tutorials -- Web Designers -- Web Design Portfolio --AllFreelanceWork--AllFreelance--Artists Helping Children --All Creative Portfolios -- All Work at Home Ideas

All Graphic Design Resources Center is always looking for more information & resources to put into our graphics directory portal. If you have any design or dtp resources that you think would fit in well, such as graphics software links, graphics and clipart foundries, objects, filters, fonts, desktop publishing or other graphic design resources articles, templates, etc...Please email us and let us know. All Graphic Design Resources Center has been around since 1998 (originally as deezin dot com), offering desktop publishing information and graphic design resources to make your web search for graphics stuff easier. Let us know how we can make All Graphic Design site more helpful for you! All informational links are hand added by an editor. Thank you for visiting our site and don't forget to bookmark this site.

R E L A T E D . L I N K S

About Us | FAQs | Contact Us | Terms of Use | Privacy Policy

All website design, text, graphics, selection and arrangement thereof, and software are the copyrighted works of Allfreelance, © 2003 - 2019 QuinStreet, Inc.