IMY 110 Theme 7 HTML Tables
1. HTML Tables 1.1. Tables The HTML table model allows authors to arrange data into rows and columns of cells, just as in word processing software such as Microsoft Word. It looks somewhat like the following: Heading 1 Heading 2 Heading 3 Heading 4 Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9 Cell 10 Cell 11 Cell 12 Cell 13 Cell 14 Cell 15 Cell 16 We can put any HTML content into cells, such as paragraphs, images, forms, even other pages. 1.2. Table Tag The table tag contains everything in the table. If you want to style the whole table, you will apply styling to this tag. Attributes border width = pixel value = pixel value or % Specifies a width for an external and internal border. border = none or border = 0 will remove the border. Specifies the overall width of the table as an absolute or relative value. cellpadding = pixel value Specifies the distance in pixels between the cell contents and cell boundary. cellspacing = pixel value Specifies the distance in pixels between cells. align = left or right Aligns the table with the left or right margin and allows text to flow around it.
Attributes bgcolor = #rrggbb Specifies a background colour for the whole table. bordercolor (not supported by all browsers) = #rrggbb Specifies a background colour for the table border. bordercolorligh t (not supported by all browsers) bordercolordar k (not supported by all browsers) = #rrggbb = #rrggbb Specifies a colour value for the light edge of shaded borders. Specifies a colour value for the dark edge of shaded borders. Table Styling Example: <html> <head> <title> Tables </title> </head> <body> <table border = "5px" cellpadding = "15px" cellspacing = "5px" style = "background-color:gold; color:blue"> table content </body> </html> Will look like:
Attributes bordercollapse (not supported by all browsers) Collapsed (1 border) separate (individual border) Either gives each cell a separate border or merges it all to together. table-layout auto or fixed Auto allows size of table to change with its content. Fix causes the size to be fixed. <caption></caption> 1.3. Table Caption A caption provides a short description of the table's purpose. By default it appears as plain text centered at the top of the table. <caption> This is a lovely table </caption>... Attribut es align valign = left centre right = top bottom Align the caption horizontally. Align the caption at the top/ bottom of table.
1.4. Summary Attribute A summary is a longer description provided for the benefit of people using speech or Braille-based user agents. <table summary = "This table gives some statistics about fruit flies: average height and weight, and percentage with red eyes (for both males and females).">... 2. Table Structuring A table consists of rows and columns that together form cells. In html we specify rows, each containing a certain amount of cells: Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8 Cell 9 table row 1: table cell 1 table cell 2 table cell 3 table row 2: table cell 4 table cell 5 table cell 6 table row 3: table cell 7 table cell 8 table cell 9 2.1. Table Rows A table row is used to group items in the same row (horizontally)....
... 2.2. Table Header This tag holds the column headings. Column headings MUST be placed inside a table row. By default column headings are bold and centered. <th> Name </th> <th> Surname </th> <th> Student No. </th>... 2.3. Table Data This tag holds the table data and represents one cell in the table. Table data MUST be placed inside a table row. <th> Name </th> <th> Surname </th> <th> Student No. </th> <td> Sarah </th> <td> Nothling </th> <td> 24286801 </th>
Attributes rowspan = number Specifies the number of rows that the cell extends across. colspan = number Specifies the number of columns that the cell extends across. nowrap Forces the contents of the cell to be displayed without wrapping. This can result in horizontal scrolling if the resulting table is wider than the browser window. Avoiding it unless you have a very good reason to use it. 2.4. Example <td rowspan = "2"> Left </td> <td colspan = "2"> Middle Top </td> <td rowspan = "2"> Right </td> <td> Middle Bottom Left </td> <td> Middle Bottom Right </td> 2.5. Nesting Tables <td>
<td> Inner Cell 1 </td> <td> Inner Cell 2 </td> </td> <td> Average </td> 3. Alternative to using Tables 3.1. Division tag This element is shown by <div> </div> tags. It defines a block-level structure in the body of a document and divides the page into groups of tags, giving the designer more control over the selected area. <div class = leftmenu > <img src = imagename.jpg /> <a href = link1.html >link 1</html> <a href = link2.html >link 2</html> </div> 3.2. Span tag The span tag pecifies a block of content inside other element contents, e.g. a paragraph. Span defines inline structure. <p>this is a <span> sehr gut </span> paragraph.</p>