Unit 5 – HTML Tables Instructor: Brent Presley

ASSIGNED READING Chapter 4, Page

PLANNING –Tables are used to create tables/columns of data on a web page. Tables can also be used to align text and images in almost any fashion you want on a web page, but current guidelines recommend you use div tags whenever possible instead. –Creating tables on the fly can be a very difficult process, particularly if the tables are complex and even more so if you need to embed one table within another. –Consider making a drawing that shows how you want your table cells to appear.

DEFINING A TABLE STRUCTURE –A table is composed of many rows each of which has many cells. –You use containers (tags) to define the boundaries of the table, beginning and end of each row, and the beginning and end of each cell. – define the beginning and end of the table – (table row) define the beginning and end of each row within the table – (table data) define the beginning and end of each cell within a row. – (table header) define the column headers for the table. Technically, they can appear anywhere in the table definition, but normally they form the cells in the first row of the table. Headers work just like td ’s except they are automatically boldfaced and centered in the cell.

DEFINING A TABLE STRUCTURE Tables can also include a caption that appears either above or below the table. your caption’s text here NOTE: the align="position" element is deprecated. –Position can be : top (positioned above table) bottom (below table) Text-align is specified just like text: left, center, right –Default is center

GENERAL LAYOUT

DEFINING A TABLE STRUCTURE Each row in the table should have the same number of cells. The cells in the same position of the rows form the table columns. HTML provides no direct control or definition of columns. I recommend laying out the structure of your table first, then adding the contents of each cell. See general layout example above. –Tip: Instead of Row 1, Column 1 using a non-breaking space as the initial contents of the cell. If you don’t put anything between the tags, the entire row is collapsed. Column widths are determined by the data entered in the cells (determined by HTML), but you can modify them using table styles.

TABLE ROW GROUPS –Row groups allow you to apply formatting to more than one row of cells. –Row groups are also used when importing data from other sources. This data may spill over multiple pages and the row groups allow header rows and footer rows to be repeated on those pages. –To create a row group, add any of the following tags around a group of row tags. –If you include more than one of the row group types, you must provide them in the order listed. –Note particularly that the tfoot tag must appear before the tbody tag. –If you include more than one of the row group types, you must provide them in the order listed.

TABLE BORDERS NOTE: the border= bordercolor= bordercolorlight= bordercolordark= attributes are all deprecated. By default, tables appear without borders By adding styles to the table tag, you can control how borders display in the table Tables include two types of the borders: –Outside borders of the table Controlled in the table tag –Inside borders of the table Controlled in the table data (td) tag –Both are defined using a 3-part style

TABLE BORDERS style="border: 1px maroon solid; " –The first value designates how wide the border is. –The second value designates the border’s color you can use names, RGB or hexadecimal values –The final value designates the line style of the border Solid is most common Dashed and dotted are also available (among other odd styles) –You may leave off the size (default is 2 px) or the color (default is gray), but you must designate a line style (default is none) –These can be listed in any order Change the table border to 2px solid red

MANAGING INSIDE TABLE BORDERS Inside border issues –First of all, it’s a pain to have to designate a border style for every cell tag in a table (particularly if the table is large) To simplify designating the borders of all cells (td) we’ll use CSS Define a style that will be applied to all the tags (embedded or external) td {border: blue 1px solid} There is space between the inside border (see Cell Spacing below) The inside borders seem to be twice as thick (if cell spacing is 0). –Actually the borders of neighboring cells are both displaying next to each other. The cell borders and the table borders both display where they are adjacent to each other

BORDER SPACING If you want the extra spacing between borders, you can control how much space is between the borders using the border-spacing style in the table tag style="border-spacing:5px; " –Default value is 2 pixels Controls the width of the space between borders –Minimum=0, but borders still display as long as there’s a table border The borders of both adjacent cells display so borders appear twice as thick as when you use the border-collapse style

BORDER SPACING The easiest way to merge all the borders, removing the extra space between the borders is to use a table style: <table style="border-collapse: collapse; " –This style tells the browser to remove overlapping borders. –Using both border-collapse and border-spacing in the same style doesn’t make sense.

UNIT 5 EXAMPLE Change border-spacing value from 5 to 10, then from 10 to 0 and observe the changes Set table style to collapse borders

CELL PADDING –(Cell style) padding:"value" Controls the spacing between the data within the cell and the cell borders (all four borders). Default is 0, but text often looks crowded in the cell. Be sure to designate the measurement type for value This style needs to be applied to each cell ( td ) in the table. –Include in embedded style used to set cell borders padding: 10px 5px 10px 5px; –Applies a 10px padding to top; 5px padding to the right, 10px padding to the bottom and 5px padding to the left sides of the cell –Note these measurements (top, right, bottom, left) are designated in clockwise order. padding-top: 10px; –Applies a 10px padding to the top sides of the cell –padding-right, padding-bottom and padding-left available

UNIT 5 EXAMPLE Change cell padding from 2 to 5 to 10 (final at 5)

TABLE SIZE Initially, a table’s width is determined by the width of its columns whose width is determined by the width of the cells within the column whose width is determined by the widest item in each column –This is very flexible but may give your table an unbalanced look –You can control this width by setting the table’s width combined with setting the column (cell) width. You can control the total width of the table using a style within the table tag –width : value; –Value is normally designated as a percentage (e.g. 80%) or in pixels (px) If you use pixels, the table will always be the same size regardless of the window size. Percent will scale to window size –NOTE: the width= and height= attributes (not in a style) are deprecated. Table height is rarely specified. Table height is normally, automatically based on the number of rows in the table and height of those rows.

TABLE ALIGNMENT –Tables can be aligned with the surrounding text (text wraps around table) –In the table tag add: style="float:left" Table at left margin, text wraps around right side style="float:left" Table aligns on right margin, text wraps around left side Note, there is no float:center. You can’t wrap text around both sides of a table. –You can however center a table between the margins of the page (window)

UNIT 5 EXAMPLE Size the table to 80% width Center the table

CELL DATA FORMATTING –You format the contents of cells exactly the same way you format any other element—using styles Any non-style cell attribute is deprecated –If you apply a style to the table tag, the style applies to all cells in the table. –If you apply a style to a row tag, the style applies to the all the cells in the row. –If you apply a style to a cell tag, the style only applies to that cell. –Cell styles override row styles override table styles.

UNIT 5 EXAMPLE Change the font of the entire table Change the background color of the title row. add the sand.png to last two rows background image. Header height: 50 Vertical-align header bottom

CELL SIZE –HTML determines the size of a cell (and therefore a column) based on the data within the cell and the total space required for all cells. If you have set a table width, the column width is also dependent on the width of the table. –You can control the width of columns. If the data (text) in the cell doesn’t fit, HTML will wrap the text to a new line, automatically expanding the cell’s height. –NOTE: the width= a nd height= attributes (not in a style) are deprecated. –You can also change the height of a cell (or row), but this is less often used. Generally, the height of the row is left to HTML to determine.

CELL SIZE Adding the width and/or height to the td tag(s) allows you to change the width or height of an individual cell and its corresponding column of cells. –HTML automatically adjusts the width of all cells in a column to the size of the largest cell in the column –Specifying a width for a cell will prevent the cell’s column from resizing as the table (via the window) resizes. –The cell width will never be larger than you specify; however, the cell (column) may become narrower if the user shrinks the table an extreme amount –Cells will never shrink smaller than the width of the longest word in the cell (column) Again width and height can be specified as either pixels or a percentage. –Percentage here refers to percentage of the overall table size. –If you specify a total number of pixels that exceed table size, HTML will either adjust the table size or scroll as appropriate. Tip: Always leave the width of one column (and only one column) unspecified. This column will then stretch to fill the table regardless of the window or table size

CELL SIZE Tip: Always leave the width of one column (and only one column) unspecified. This column will then stretch to fill the table regardless of the window or table size unit 5 examples –Set the width of the header of column 1 to 110. – Note the effects on column 2 when you resize the window. – Set width of header 1 to 20% – Set width of table to 50%

SPANNING ROWS/COLUMNS –Spanning is HTML’s answer to merging cells (in Word). –Spanning is added to th or td tags only. –NOTE: these are not style elements, they are attributes (designated outside a style). There are no corresponding style elements. –colspan=x is used to designate that this cell spans x number of columns (merges that many cells horizontally to the right) –rowspan=x is used to designate that this cell spans x number of rows (merges that many cell vertically (down) –When spanning rows or columns, make sure the remaining td/th definitions match up appropriately Ensure each row in the table has the same number of cells (either individual or spanned). When designating a cell that spans rows, that cell’s definition is only included as part of the first row spanned.

TABLE TIPS Indent each and tag properly. Place comments at the beginning of each row describing what it holds (where possible) Instead of removing td tags to allow for spans, comment them out: Whenever you enter a colspan=x tag, remove x td tags from the row immediately after the td tag with the colspan in it. Whenever you enter a rowspan=x tag, remove 1 td tag from each of the following x rows. Build your table one cell (span) at a time. Work from the top down, left to right.

IN CLASS PROJECT –CREATE THIS TABLE

IN CLASS PROJECT 7 columns, 7 rows –Tip: place a non-breaking space in each cell. Add comments to beginning of each row describing purpose. Merge all the cells in the first row. Add text In row 2: span the first cell for 6 rows. Remove one cell from each of the following rows. Add days. Add times (right-aligned, width=45) Enter Excel Enter Prep And Grading (row span 4) remove a blank cell from following rows. Enter Troubleshooting Enter Donating Platelets Enter Meetings Set each column (Mon-Fri) to 18% of width

IN CLASS PROJECT Merge all cells under platelets Insert a 3 row, 3 column table (no borders) Merge the top & bottom row. Use sad face to fill merged cells the middle left and middle right cells In the middle cell and an unordered list of weekend tasks: Vacuum Scrub toilets Grading More prep Laundry

IN CLASS PROJECT –In addition to using the border: and border-color: styles described above, you can also control the border style and color of individual borders of the table or a cell –Set the three values (width, style, color) of a designated border: border-top: border-bottom: border-left: border-right: –Set the style of a designated border: border-top-style: border-bottom-style: border-left-style: border-right-style: –Set the color of a designated border: border-top-color: border-bottom-color: border-left-color: border-right-color: –Set the width of a designated border: border-top-width: border-bottom-width: border-left-width: border-right-width: This site has a cool try it feature for all table styles: