Table tags are used for displaying spreadhseet-like data neatly formatted in rows and columns. They can also be used to design page layouts by placing content into invisible rows and columns of a 'table'. Table - <table> ... </table> Used to define a table, it contains all row and column tags along with their content. Think of it like the body tag, although there must always be at least one row in a table. It has some attributes to define the table layout. border="?" - The size of the border (in pixels) surrounding the table cellspacing="?" - The space (in pixels) between each cell, eg. between rows or columns cellpadding="?" - The space, or margin, between the content of a cell and its border Table Row - <tr> </tr> To start a table row, the tr tags must appear within the table tags. Table Cell - <td> </td> A table cell is where the content goes. Cells must exist within rows, where the number of cells in a row determines the number of columns in the table. Cell properties can be set using the attributes: align="?" - Alignment of text in the cell: left, center or right. valign="?" - Vertical alignment of the cell: top, middle or bottom. width="?" - Specify a fixed with of a cell, by default they will only take up as much space as they need. colspan="?" - Column spanning allows a cell to take up more than one column, in order to match layouts of other rows. Replace ? with the number of columns to span. rowspan="?" - Row spanning, similar to column spanning, forces a cell to occupy more than one row. nowrap - No text in the cell will be wrapped onto the next line. Similar to the nobr tag for paragraphs Header Cell - <th> </th> Similar to a table cell, a header cell must appear within a table row. Normally found in the first row, header cells are usually shown in bold and centered by the browser. Example:A simple table with three rows and two columns. <html> <body> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Cell A1</td> <td>Cell B1</td> </tr> <tr> <td>Cell A2</td> <td>Cell B2</td> </tr> </table> </body> </html>
0 Comments
Leave a Reply. |