.

Construction Of HTML Tables

" HTML BASIC TABLES "
" HTML CODE "	" OUTPUT / DESCRIPTION "
<table border="1" align="center"> <caption>Table Caption</caption> <tr> <th>Title 1</th> <th>Title 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>	Table Caption Title 1 Title 2 Row 1, Cell 1 Row 1, Cell 2 Row 2, Cell 1 Row 2, Cell 2
	" Table with 3 rows and 2 cells " Each table starts with a table tag. Each table row starts with a tr tag. Each table header starts with a th tag. Each table data starts with a td tag. To display a table with borders, you will have to use the "border attribute". To hide borders use the number "0". To align tables use the "align attribute". Values are left/center/right. To have a table with background color, use the "bgcolor attribute" (bgcolor="blue"). The attribute can be also used in tr/th/td tags. But, you can use styles instead      (style="background-color:blue;").
<table border="1"> <colgroup> <col width="80"> <col width="100"> <col width="120"> </colgroup> <tr> <th>Title 1</th> <th>Title 2</th> <th>Title 3</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> <td style=" background-color:221711; border:1px orange solid; color:orange;"> Row 2, Cell 3</td> </tr> </table>	Title 1 Title 2 Title 3 Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
	" Table with 3 rows and 3 cells " The example shows a colgroup that has three columns of DIFFERENT widths. In HTML you can use tables to create borders around a text. But, with the CSS border properties you can create borders with nice effects, and it can be applied to any ELEMENT (th/td etc.). You can also add backgrounds and, format your text in the CELLS. °Border-Style And Text Properties° °HTML 6-Digit Hex Color Codes°
<table border="1"> <colgroup width="100" span="3"> </colgroup> <tr> <th>Title 1</th> <th>Title 2</th> <th>Title 3</th> </tr> <tr> <td>Row 1, Cell 1</td> <td> &nbsp; </td> <td>Row 1, Cell 3</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> <td>Row 2, Cell 3</td> </tr> </table>	Title 1 Title 2 Title 3 Row 1, Cell 1   Row 1, Cell 3 Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
	" Table with 3 rows and 3 cells " The example shows a colgroup that has three columns with the SAME width. To have empty Cells in a Table: Add a non-breaking space (&nbsp;) to the data cells you wish.
Source: °w3schools.com° °selfhtml.org° Myspace Tables: °Create New Sections And Tables°

" TAG "	" DESCRIPTION "
<table>	Defines a table. Inside a <table> tag you can put table headers, table rows, table cells, and other tables.
<caption>	Defines a table caption. The <caption> tag must be inserted immediately after the <table> tag. You can specify only one caption per table. Usually the caption will be centered above the table.
<colgroup>	Defines groups of table columns (column group). The colgroup element is an empty element that contains col tags or attributes only.
<col>	Defines the attribute values for one or more columns in a table (column). The col element is an empty element that contains attributes only. Use this element when you want to specify different attribute values to a column inside a colgroup.
<tr>	Defines a table row (table row). This element goes inside the table element.
<th>	Defines a table header cell in a table (table header). The text within the th element usually renders in bold.
<td>	Defines a table cell (table data). To create columns, you must specify td elements within a tr element. A data cell can contain text, images, lists, paragraphs, forms, tables, etc.

" TAG "	" BESCHREIBUNG "
<table>	Leitet eine Tabelle ein (table = Tabelle). In einem <table>-Tag können Tabellenköpfe, Tabellenzeilen, Tabellendaten, und andere Tabellen eingefügt werden.
<caption>	Definiert eine Tabellenüberschrift. Das Element muss unmittelbar nach dem einleitenden <table>-Tag notiert werden. Es wird zenteriert über die Tabelle dargestellt und kann nur einmal angegeben werden.
<colgroup>	Damit wird eine Vorab-Definition der Tabellenspalten eingeleitet (column group). Das colgroup Element ist ein leeres Element und beinhaltet nur col-Tags oder Attribute.
<col>	Definiert die Attributen-werte für eine oder mehrere Spalten in einer Tabelle (column). Das col Element ist ein leeres Element und beinhaltet nur Attribute. Das erste <col>-Tag definiert die erste Spalte, das zweite die zweite Spalte usw.
<tr>	Leitet eine neue Tabellenzeile ein (tr = table row = Tabellenzeile). Das Element wird innerhalb einem Tabellen-Element eingefügt.
<th>	Leitet eine Kopfzelle ein (th = table header = Tabellenkopf). Der Text in einem th Element wird immer in Fett-Schrift angezeigt.
<td>	Leitet eine normale Datenzelle (td = table data = Tabellendaten). In einer Tabellenzelle können beliebige Elemente stehen, d.h. Text, andere Block- und Inline-Elemente und sogar eine weitere Tabelle.

Cellspacing And Cellpadding
To give your table cells a little more breathing room, use CELLSPACING and CELLPADDING.
" Cellspacing " " Zellenabstand "	" Cellpadding " " Zelleninnenabstand "
CELLSPACING controls the space between table cells, expressed in pixels.   Mit CELLSPACING wird den Abstand der Zellen untereinander in Pixeln geregelt.	CELLPADDING sets the amount of space between the contents of the cell and the cell wall, expressed in pixels.   Mit CELLPADDING wird den Innenabstand einer Zelle geregelt, also den Abstand zwischen Zellenrand und Zelleninhalt in Pixeln.
<TABLE BORDER="1" CELLSPACING="10"> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>	<TABLE BORDER="1" CELLPADDING="10"> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>

Row 1, Cell 1 Row 1, Cell 2 Row 2, Cell 1 Row 2, Cell 2

Row 1, Cell 1 Row 1, Cell 2 Row 2, Cell 1 Row 2, Cell 2

© Copyright 2006- by KhAk