Published by: Sujan
Published date: 16 Jun 2021
HTML tags for creating tables were originally developed for presenting rows and columns of tabular data, however, designers quickly co-opted them as a valuable tool for controlling the layout of web pages. Tables allow you to create columns of text, hold white space between elements, and constrict the dimensions of the page’s content in ways other HTML formatting tags won’t.
<caption>…</caption>
Provides a brief summary of the table’s contents or purpose. According to the W3C HTML 4.0 Specification, if used, the caption must immediately follow the <table> tag and precede all other tags. The width of the caption is determined by the width of the table. The caption’s position as is played in the browser can be controlled with the align attribute (or align in MSIE).
Attributes
align=top|bottom|left|right|center
Positions the caption relative to the table. This attribute has been deprecated by the W3C 4.0 Spec in favor of style sheet positioning.
summary=text
W3C 4.0 Specification only. Used to provide a longer description of the table’s contents that could be used by a speech- or Braille-based web browser.
valign=top|bottom
Internet Explorer 3.0 and higher only. Positions the caption above or below the table (top is the default).
<col>
Specifies properties for a column (or columns) within a column group (<colgroup>). Columns can share attributes (such as text alignment) without being part of a formal structural grouping. Column groups and columns were introduced by Internet Explorer 3.0 and are now proposed by the HTML 4.0 specification as a standard way to label table structure. They may also be useful in speeding the table display (i.e., the columns can be displayed incrementally without waiting for the entire contents of the table).
Attributes
align=left|right|center
Specifies alignment of text in the cells of a column.
char=character
Specifies a character along which the cell contents will be aligned. The default character is a decimal point (language-appropriate).
charoff=length
Specifies the distance to the first alignment character (char) on each line. If a line doesn’t use an alignment character, it should be horizontally shifted to end at the alignment position.
span=number
Specifies the number of columns “spanned” by the <col> element (which shares its attributes with all the columns it spans).
valign=top|middle|bottom|baseline
Specifies the vertical alignment of text in the cells of a column.
width=pixels, percentage, n*
Specifies the width (in pixels, percentage, or relative) of each column spanned by the <col> element. It overrides the width attribute of the containing <colgroup> element.
<table>…</table>
Defines the beginning and end of a table. The end tag is required, and its omission may cause the table not to render in some browsers.
Attribute
align=left|right|center
Aligns the table within the text flow (same as aligning in the <img> tag). The default alignment is left. The center value is not universally supported, so it is more reliable to center a table on a page using tags outside the table (such as <center> or <div>). This attribute has been deprecated by the 3C 4.0 Specification in favor of style sheet positioning.
background=url
Specifies a graphic image to be tiled in the background of the table. In Internet Explorer 3.0 and higher, the image tiles behind the entire table. In Netscape Navigator 4.0, the tile repeats in each individual frame (although its support is not officially documented).
bgcolor=“#rrggbb” or color name
Specifies a background color for the entire table. Value is specified in hexadecimal RGB values or by color name
border=number
Specifies the width (in pixels) of the border around the table and its cells. Set it to border=0 to turn the borders off completely. The default value is 1. Adding the word border without a value results in a 1-pixel border.
cellpadding=number
Sets the amount of space, in a number of pixels, between the cell border and its contents. The default value is 1.
cellspacing=number
Sets the amount of space (in the number of pixels) between table cells. The default value is 2.
<td>…</td>
Defines a table data cell. The end tag is not required but may prevent unpredictable table display, particularly if the cell contains images. A table cell can contain any content, including another table.
Attributes
align=left|center|right
Aligns the text (or other elements) within a table cell. The default value is left. This attribute has been deprecated by the W3C 4.0 Spec in favor of positioning with style sheets.
background=url
Specifies a graphic image to be used as a tile within the cell. Netscape’s documentation does not cover this tag, but it is supported by version 4.0.
bgcolor=”#rrggbb” or color name
Specifies a color to be used in the table cell. A cell’s background color overrides colors specified at the row or table levels.
colspan=number
Specifies the number of columns the current cell should span. The default value is 1. According to the W3C 4.0 Specification, the value zero (“0”) means the current cell spans all columns from the current column to the last column in the table; in reality, however, this feature is not supported in currently available 4.0 browsers.
height=number, percentage
Specifies the height of the cell in a number of pixels or by a percentage value relative to the table height. The height specified in the first column will apply to the rest of the cells in the row. The height values need to be consistent for cells in a particular row. This attribute has been deprecated in the W3C 4.0 Specification.
nowrap
Disables automatic text wrapping for the current cell. Line breaks must be added with a <p> or <br>. This attribute has been deprecated by the W3C 4.0 Spec in favor of style sheet controls.
rowspan=number
Specifies the number of rows spanned by the current cell. The default value is 1. According to the W3C 4.0 Spec, the value zero (“0”) means the current cell spans all rows from the current row to the last row; in reality, however, this feature is not supported in currently available 4.0 browsers.
valign=top|middle|bottom|baseline
Specifies the vertical alignment of the text (or other elements) within the table cell. The default is middle.
width=number
Specifies the width of the cell in the number of pixels or by a percentage value relative to the table width. The width specified in the first row will apply to the rest of the cells in the column and the values need to be consistent for cells in the column. This attribute has been deprecated in the W3C 4.0 Specification. Internet Explorer 2.0 and higher only.
bordercolor=”#rrggbb” or color name
Defines the border color for the cell.
bordercolorlight=”#rrggbb” or color name
Defines the dark shadow color for the cell border.
bordercolordark=”#rrggbb” or color name
Defines the light highlight color of the cell border.
<th>…</th>
Defines a table header cell. Table header cells function the same as table data cells (<td>). Browsers generally display the content of table header cells in bold text centered horizontally and vertically in the cell (although some browsers vary). The end tag is optional.
Attributes
The <th> tag uses the same attributes as the <td> tag. See listing under <td>.
<tr>…</tr>
Defines a row of cells within a table. A table row is delimited by <tr> tags contains no content other than a collection of table cells (<td>). The end tag is optional.
Attributes
align=left|center|right
Aligns the text (or other elements) within the cells of the current row. This attribute has been deprecated by the W3C 4.0 Spec in favor of positioning with style sheets.
bgcolor=”#rrggbb” or color name
Specifies a color to be used in the row. A row’s background color overrides the color specified at the table level.
valign=top|middle|bottom|baseline
Specifies the vertical alignment of the text (or other elements) within cells of the current row. Internet Explorer 2.0 and higher only background=url of image file
Specifies a graphic image to be used as a tile within the row.
bordercolor=”#rrggbb” or color name
Defines the border color for the row. bordercolorlight=”#rrggbb” or color name
Defines the dark shadow color for the row border. bordercolordark=“#rrggbb” or color name Defines the light highlight color of the row border.
<frame>
Defines a single frame within a <frameset>. Attributes bordercolor=”#rrggbb” or color name
Sets the color for the frame’s borders (if the border is turned on). Support for this attribute is limited to Netscape Navigator 3.0 and higher and Internet Explorer4.0. frameborder=1|0 (IE 3+ and W3C 4.0 Spec.); yes|no (NN 3+ and IE 4.0)
Determines whether there is a 3-D separator drawn between the current frame and surrounding frames. A value of 1 (or yes) turns the border on. A value of 0 (or no) turns the border off. You may also set the frameborder at the frameset level, which may be more reliable.
<frameset>…</frameset>
Defines a collection of frames or other framesets.
Attributes
border=number
Sets frame border thickness (in pixels) between all the frames in a frameset (when the frame border is turned on).
bordercolor=#rrggbb” or color name
Sets a border color for all the borders in a frameset. Support for this attribute is limited to Netscape Navigator 3.0 and higher and Internet Explorer 4.0.
cols=list
Establishes the number and sizes of columns in a frameset. The number of columns is determined by the number of values in the list. Size specifications can be in absolute pixel values, percentage values, or relative values (*) based on available space. frameborder=1|0 (IE 3+ and W3C 4.0 Spec.); yes|no (NN 3+ and IE 4.0) Determines whether 3-D separators are drawn between frames in the frameset. A value of 1 (or yes) turns the borders on; 0 (or no) turns the borders off.
Because Netscape and Internet Explorer support different values, you may need to specify the frameborder twice within <frame> to ensure backwards compatibility, as follows: frameborder=yes frameborder=1 …
framespacing=number (IE only)
Internet 3.0 and higher only. Adds additional space (in pixels) between adjacent frames.
rows=list (number, percentage, or *)
Establishes the number and sizes of rows in the frameset. The number of rows is determined by the number of values in the list. Size specifications can be in absolute pixel values, percentage values, or relative values (*) based on available space.
<noframes> … </noframes>
Defines content that will be displayed by browsers that cannot display frames. Browsers that do support frames will ignore the content between <noframes> tags.
A web page that is divided into frames is held together by a top-level frameset document. A frameset document contains a standard header portion (as indicated with the <head> tag). However, unlike standard HTML documents, frameset documents do not have a <body>— instead, they contain a <frameset> tag, which is used to define columns and rows of individual frames (each indicated with a <frame> tag).
<HTML>
<HEAD><TITLE>Simple Framed Document</TITLE></HEAD>
<FRAMESET COLS=”*,*”>
<FRAME SRC=”left.html”>
<FRAME SRC=”right.html”>
</FRAMESET>
<NOFRAMES>Your browser does not support frames.</NOFRAMES>
</HTML>
<form> … </form>
Indicates the beginning and end of a form. There can be more than one form in an HTML document; however, forms cannot be nested and it is important that they do not overlap.
Attributes
action=url
Specifies the URL of the application that will process the form (required). This is most often a pointer to a CGI script on the server. The default is the current URL.
enctype=encoding
Specifies how the values for the form controls are encoded when they are submitted to the
server. The default is the Internet Media Type (application/ x-www-form-urlencoded). The value multi-part/form-data should be used in combination with the file input element.
method=get|post
Specifies which HTTP method will be used to submit the form data (required). With get (the default), the information is appended to and sent along with the URL itself. The post method puts the form information in a separate part of the body of the HTTP request. post is the preferred method according to the W3C specification.
HTML 4.0 Specification attributes
accept=content-type-list
Specifies a comma-separated list of file types (MIME types) the server will accept and is able to process. Browsers may one day be able to filter out unacceptable files when prompting a user to upload files to the server.
accept-charset=charset list
Specifies the list of character encodings for input data that must be accepted by the server in order to process the current form. The value is a space- and/ or comma-delimited list of charset values. The default value is unknown.
<input type=button>
Creates a customizable “push” button. Customizable buttons have no specific behavior but can be used to trigger functions created with JavaScript controls.
Attributes
name=string
Assigns a name to the form element to be passed to the forms processing application.
value=string
Specifies the initial value for the parameter.
<input type=checkbox>
Creates a checkbox input element within a <form>. Checkboxes are like on/off switches that can be toggled by the user. When a form is submitted, only the “on” checkboxes submit values to the server.
Attributes
checked
When this attribute is added, the checkbox will be checked by default.
name=text
Assigns a name to the checkbox to be passed to the form-processing application if selected. Giving several checkboxes the same name creates a group of checkbox elements, allowing users to select several options with the same property.
value=text
Specifies the initial value of the control that is passed on to the server. If not defined, a value of “on” is sent.
<input type=hidden>
Creates an element within a <form> that does not display in the browser. Hidden controls can be used to pass special form-processing information along to the server that the user cannot see nor alter.
name=text
Specifies the name of the parameter that is passed to the form-processing application for this input element (required).
value=text
Specifies the value of the element that is passed to the form-processing application.
<input type=image>
Allows an image to be used as a substitute for a submit button.
Attributes
align=top|middle|bottom
Aligns the image with respect to the surrounding text lines.
name=text
Specifies the name of the parameter to be passed along to the form processing application.
src=url
Provides the URL of the image (required).
<input type=password>
Creates a text-input element (like text) but the input text is rendered in a way that hides the characters, such as displaying a string of asterisks (*) or bullets (•). Note this does not encrypt the information and should not be considered as a real security measure.
Attributes
maxlength=number
Specifies the maximum number of characters the user can input for this element.
name=text
Specifies the name of this parameter to be passed to the form-processing application for this element (required).
size=number
Specifies the size of the text-entry box (measured in the number of characters) to be displayed for this element. Users can type entries that are longer than the space provided, causing the field to scroll to the right.
value=text
Specifies the value that will initially be displayed in the text box.
<input type=radio>
Creates a radio button that can be turned on and off. When a group of radio buttons shares the same control name, only one button within the group can be “on” at one time and all the others will be turned “off.” This makes them different from checkboxes, which allow multiple choices to be selected within a group.
Attributes
checked
Causes the radio button to be in the “on” state when the form is initially displayed.
name=text
Specifies the name of the parameter to be passed on to the forms-processing application if this element is selected (required).
value=text
Specifies the value of the parameter to be passed on to the forms-processing application.
<input type=reset>
Creates a reset button that clears the contents (or sets them to their default values) of the elements in a form.
Attributes
value=text
Specifies alternate text to appear in the button (it will say “Reset” by default).