XHTML Tutorial
XHTML Tags Types
XHTML Documents
First Web Page
Page Content
List Structure
Styles
Color Styles
Span and Division
Style & Classes
Font Tags
Special Characters
Lists Style
Element Position
Text Links
Redirecting Pages
Traversing Folders
Tables
Table Borders
Table Colors
Table Groupings
Creating Framesets
Form Controls
Group Boxes
Form Submission


Free Tutorials
Internet
What is Internet
Internet Games
Learn TCP IP
HTML
Learn HTML
Learn DHTML
Learn CSS
Learn XML
Learn XHTML
Learn WML
Database
Learn Access
Learn Data-VB
Learn Oracle
Learn SQL
Programming
Learn ActiveX
Learn C++
Learn CGI_Perl
Learn Interdev
Learn Java
Learn JavaScript
Learn Vbscript
Learn VisualBasic
Learn VC++
Operating systems
Learn RedHat
Learn Unix
Learn Winnt
Tables

Previous Next


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.

A Simple Table

A Web table, like any other tabular presentation, contains rows and columns, the intersections of which are the cells of the table into which information is placed. A simple 3 x 3 table is shown below:

Cell 1.1 Cell 1.2 Cell 1.3
Cell 2.1 Cell 2.2 Cell 2.3
Cell 3.1 Cell 3.2 Cell 3.3

The rows, columns, and cell intersections of a table are defined with three basic tags. <table>...</table> tags surround the entire table description; <tr>...</tr> (table row) tags defined the rows of the table; and <td>...</td> (table data) tags define the cells, or columns, that appear in each row. The <td> tag encloses the content that appears in the cell. The relationships between these tags used to create the above table are shown shown below:

<table>
<tr>
  <td>
Cell 1.1</td>
  <td>
Cell 1.2</td>
  <td>
Cell 1.3</td>
</tr>
<tr>
  <td>
Cell 2.1</td>
  <td>
Cell 2.2</td>
  <td>
Cell 2.3</td>
</tr>
<tr>
  <td>
Cell 3.1</td>
  <td>
Cell 3.2</td>
  <td>
Cell 3.3</td>
</tr>
</table>

Table and Cell Borders

Cell 1.1 Cell 1.2 Cell 1.3
Cell 2.1 Cell 2.2 Cell 2.3
Cell 3.1 Cell 3.2 Cell 3.3

By default, table tags produce no borders around the table or around its cells. The above code actually creates the table layout shown at the right. Data are aligned within rows and columns; however, no borders are displayed. In certain cases you may not wish to display table borders; in most cases you will. Therefore, style sheets must be applied to the table and to its cells to display borders around both.

Cell 1.1 Cell 1.2 Cell 1.3
Cell 2.1 Cell 2.2 Cell 2.3
Cell 3.1 Cell 3.2 Cell 3.3

The code shown below produces the bordered table shown at the right. The entire table is surrounded by a 1-pixel outset border and each of the cells is surrounded by a 1-pixel inset border. This styling is typical for a standard table.

<style>
  table {border:outset 1px}
  td    {border:inset 1px}
</style>

<table>
<tr>
  <td>
Cell 1.1</td>
  <td>
Cell 1.2</td>
  <td>
Cell 1.3</td>
</tr>
<tr>
  <td>
Cell 2.1</td>
  <td>
Cell 2.2</td>
  <td>
Cell 2.3</td>
</tr>
<tr>
  <td>
Cell 3.1</td>
  <td>
Cell 3.2</td>
  <td>
Cell 3.3</td>
</tr>
</table>

An embedded style sheet is the most convenient method of styling table elements. In-line style sheets can be used, however, individual style sheets would have to appear in each of the <td> tags. It is much easier declaring embedded styling for table and td selectors.

Tables can have any style of outer borders and cells can have there own border styles. Border styling is covered in a following tutorial.

Table Size

By default, the size of a table depends on the size of the data appearing in its cells. A column is as wide as the widest entry in the column; all rows are as wide as the combined width of data within the widest cells. In effect, table cells collapse around the data they contain. Although it is not apparent in these examples, data are aligned horizontally left and vertically centered within the cells. Style settings to manage table and cell sizes and data alignment are described in later tutorials.

Nested Tables

Cell 1 Cell 2
Cell 3
Cell A Cell B
Cell C Cell D

Tables can be nested; that is, tables can appear within cells of a table. This doesn't involve any particular coding complication -- table specifications are simply inserted as contents of a cell. The cell expands in size to permit full display of the nested table as shown in the accompanying table and XHTML code.

<style>
  table {border:outset 1px}
  td    {border:inset 1px}
</style>

<table>
<tr>
  <td>
Cell 1</td>
  <td>
Cell 2</td>
</tr>
<tr>
  <td>
Cell 3</td>
  <td>

    <table>
    <tr>
      <td>
Cell A</td>
      <td>
Cell B</td>
    </tr>
    <tr>
      <td>
Cell C</td>
      <td>
Cell D</td>
    </tr>
    </table>

  </td>
</tr>
</table>

Styling Multiple Tables

Since tables provide one of the most effective methods for arranging content on a Web page it is often the case that a single page contains two or more tables, either nested tables or multiple tables containing different data content. It is also often the case that these tables need to be styled differently. Therefore, the embedded style sheet must differentiate among the tables so that each can have its own special styling.

Recall from earlier discussions that page elements can be assigned id values to uniquely identify them. These ids are then used in the embedded style sheet to indicate which styles pertain to which unique elements. This technique can be used to apply different styles to different tables.

The following two tables, for example, have different border styles and sizes. The first table is styled with standard borders; the second table uses the outset style for both table and cell borders and uses different border widths.

Cell 1 Cell 2
Cell 3 Cell 4
Cell 1 Cell 2
Cell 3 Cell 4

The style sheet for these two tables is shown below:

<style>
  table#Table1    {border:outset 1px}
  table#Table1 td {border:inset 1px}

  table#Table2    {border:outset 3px}
  table#Table2 td {border:outset 2px}
</style>

<table id="Table1">
<tr>
  <td>
Cell 1</td>
  <td>
Cell 2</td>
</tr>
<tr>
  <td>
Cell 3</td>
  <td>
Cell 4</td>
</tr>
</table>

<table id="Table2">
<tr>
  <td>
Cell 1</td>
  <td>
Cell 2</td>
</tr>
<tr>
  <td>
Cell 3</td>
  <td>
Cell 4</td>
</tr>
</table>

ID selectors are used to separately style the <table> tags for the two tables. Contextual selectors are used to style their <td> tags. In this way any number of tables can take on different styles without styling conflicts. (See tutorial "Applying Special Styles" for a review of ID selectors; see "Contextual Selectors" to review these style selectors.)

This has given you a general overview of tables and style sheet approaches to styling them. The following tutorials cover detailed aspects of table design and formatting.


Previous Next





|  About us | Categories | New Releases | Most Popular | Web Tutorial | Free Download | Drivers |



2013 Soft Lookup Corp. Privacy Statement