Using table tag

---

The

tag begins the table, you place what you want inside, and end the table with the tag. To begin adding contents to your table, you will need the and tags. The stands for table row and the stands for table data, which is what you will place after this tag. You end a table data section with the tag and each table row with the tag. Here is a basic table with just one cell:

This is my table!

 

The TABLE element

     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
  %attrs;                              -- %coreattrs, %i18n, %events --
  summary     %Text;         #IMPLIED  -- purpose/structure for speech output--
  width       %Length;       #IMPLIED  -- table width --
  border      %Pixels;       #IMPLIED  -- controls frame width around table --
  frame       %TFrame;       #IMPLIED  -- which parts of frame to render --
  rules       %TRules;       #IMPLIED  -- rulings between rows and cols --
  cellspacing %Length;       #IMPLIED  -- spacing between cells --
  cellpadding %Length;       #IMPLIED  -- spacing within cells --
  >

Start tag: required, End tag: required

Attribute definitions

summary = text [CS]
    This attribute provides a summary of the table's purpose and structure for user agents rendering to non-visual media such as speech and Braille.
align = left|center|right [CI]
    Deprecated. This attribute specifies the position of the table with respect to the document. Permitted values:

        left: The table is to the left of the document.
        center: The table is to the center of the document.
        right: The table is to the right of the document.

width = length [CN]
    This attribute specifies the desired width of the entire table and is intended for visual user agents. When the value is a percentage value, the value is relative to the user agent's available horizontal space. In the absence of any width specification, table width is determined by the user agent.

Attributes defined elsewhere

    id, class (document-wide identifiers)
    lang (language information), dir (text direction)
    title (element title)
    style (inline style information )
    onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
    bgcolor (background color)
    frame, rules, border (borders and rules)
    cellspacing, cellpadding (cell margins)

The TABLE element contains all other elements that specify caption, rows, content, and formatting.

The following informative list describes what operations user agents may carry out when rendering a table:

    Make the table summary available to the user. Authors should provide a summary of a table's content and structure so that people using non-visual user agents may better understand it.
    Render the caption, if one is defined.
    Render the table header, if one is specified. Render the table footer, if one is specified. User agents must know where to render the header and footer. For instance, if the output medium is paged, user agents may put the header at the top of each page and the footer at the bottom. Similarly, if the user agent provides a mechanism to scroll the rows, the header may appear at the top of the scrolled area and the footer at the bottom.
    Calculate the number of columns in the table. Note that the number of rows in a table is equal to the number of TR elements contained by the TABLE element.
    Group the columns according to any column group specifications.
    Render the cells, row by row and grouped in appropriate columns, between the header and footer. Visual user agents should format the table according to HTML attributes and style sheet specification.

The HTML table model has been designed so that, with author assistance, user agents may render tables incrementally (i.e., as table rows arrive) rather than having to wait for all the data before beginning to render.

In order for a user agent to format a table in one pass, authors must tell the user agent:

    The number of columns in the table. Please consult the section on calculating the number of columns in a table for details on how to supply this information.
    The widths of these columns. Please consult the section on calculating the width of columns for details on how to supply this information.

More precisely, a user agent may render a table in a single pass when the column widths are specified using a combination of COLGROUP and COL elements. If any of the columns are specified in relative or percentage terms (see the section on calculating the width of columns), authors must also specify the width of the table itself.
Table directionality

The directionality of a table is either the inherited directionality (the default is left-to-right) or that specified by the dir attribute for the TABLE element.

For a left-to-right table, column zero is on the left side and row zero is at the top. For a right-to-left table, column zero is on the right side and row zero is at the top.

When a user agent allots extra cells to a row (see the section on calculating the number of columns in a table), extra row cells are added to the right of the table for left-to-right tables and to the left side for right-to-left tables.

Note that TABLE is the only element on which dir reverses the visual order of the columns; a single table row (TR) or a group of columns (COLGROUP) cannot be independently reversed.

When set for the TABLE element, the dir attribute also affects the direction of text within table cells (since the dir attribute is inherited by block-level elements).

To specify a right-to-left table, set the dir attribute as follows:

...the rest of the table...


The direction of text in individual cells can be changed by setting the dir attribute in an element that defines the cell. Please consult the section on bidirectional text for more information on text direction issues.