For the World Wide Web Styling Tables with CSS HTML For the World Wide Web Styling Tables with CSS
Collect Your Files Kyle would like you to add styles to the table to make it more visually attractive. Download the files in the KPAF Styles folder. Save them in the KPAF folder you used to create the schedule web page.
Add Padding to the Table Cells Kyle would like to add more space in each cell by adding 3 pixels of cellspacing and 5 pixels of cellpadding to make the schedule easier to read. Open the schedule.htm file in notepad. Add the following attribute to the opening <table> tag after the border attribute: cellspacing="3" cellpadding="5“ Save your changes and open schedule.htm in your browser. Verify that the spacing in the table has been changed.
Setting the Table Widths & Heights You can use HTML to set the overall width and height of a table and you can also set the width and height of individual cells within a table. To set the width and height of the overall table use the following attribute in the opening <table> tag. <table width="value" height="value"> Where value is any value is in pixels or a percentage.
Setting Column width and Row Heights You can set the width of an individual column by using the width attribute on the <colgroup> element. <colgroup width="value"></colgroup> You can set the height of an individual row by using the height attribute on the <tr> element. <tr height="value"> . . . </tr> Where value is in pixels or percentages
Formmating Table Borders You used the border attribute to create a table border and gridlines when you created the schedule table. The table frame attribute allows several types of borders to be added to a table. Table Frame Border Appearance above Only above the table below Only below the table border Around all four sides of the table box hsides On the top and bottom (horizontal sides) lhs Only on the left side rhs Only on the right side void No border vsides On the left and right (vertical sides)
Table Rules A table rule defines how the internal gridlines are displayed. The rules attribute is used to add a table rule to the <table> element. Table Rule Description all Places gridlines around all table cells cols Places gridlines around the columns groups Places gridlines around row groups none No gridlines rows Places gridlines around rows
Aligning Table Cells Horizontaly To position cell data horizontally, add the align attribute to the <colgroup>, <rowgroup>, or <tr> elements. <tr align="position"> Where position is left, center, right, justify, or char
Aligning Table Cells Vertically To position cell data vertically add the valign attribute to the same elements as the align attribute. <colgroup valign="position"> Where position is top, middle, bottom, or baseline.
Add Cell Positions to the Table Kyle would like the schedule data to be lined up with the top of each cell for the entire table. To do this add the valign attribute to the <tbody>element. <tbody valign="top" > Save your changes and refresh your browser. Verify that the program titles have all moved to the top of the cells.
Formatting Tables with CSS Kyle plans to add additional tables with the morning and afternoon schedules in the future and would like them all to display in the same way. To avoid having to make the format changes on each schedule, he would like you to create a CSS for the table that can be used on all three schedules.
Create a Table CSS Return to the schedule.htm file in notepad. Add a link to the table.css file in the <head> section. <link href="tables.css" rel="stylesheet" type="text/css" /> Because we are going to style the table using the table.css, we do not need the valign attribute in the <tbody> element. Delete it. Add a class attribute to the <table> tag <table border="1" class="schedule" … Save your changes
Add Table Border Styles Open the table.css file in notepad. Add the following style to apply a border to the entire table. table.schedule {border: 10px outset rgb(153, 0, 153)} Add the following style to apply borders to each table cell. table.schedule th, table.schedule td {border: 1px solid grey} These styles only apply to the table belonging to the class=schedule. They will not affect other tables in the site. Save your changes and refresh your browser.
Separate or Collapsed Borders CSS provides two ways of drawing table borders the default is separate borders but you can choose to collapse them using the attribute: border-collapse: type Where type is separate or collapse.
Border Spacing If you choose separate boarders you can also adjust the spacing between them by using the attribute: border-spacing: value Where value is the space between the borders using a CSS units of measure (px, em, %, in)
Collapse the Table Borders Return to the table.css file in notepad. Add the following style to the table element table.schedule {border: 10px outset rgb(153, 0, 153); border-collapse: collapse} Save your changes and refresh your browser. Verify that the table borders have collapsed to a single line between cells.
Apply Styles to Rows & Columns Kyle does not like the font for the table text. He would like to apply a sans-serif font that is 0.7em units in size. He would also like the text in the header row to appear in a white font on a purple background and the first column to appear on a light yellow background. You can use the row and column groups you created to apply these changes.
Levels of Precedence in Table Styles You notice that the first cell is in both the header row and the header column. Which style will be applied? There is a hierarchy of table styles that will determine how conflicts like yours are resolved. In Kyle’s design, the first cell will have a purple background because the row groups take precedence over the columns or column groups, Table Column Group Row Group Rows Table Cells Highest precedence Lowest
Set the Text & Background Table Styles Return to the table.css file in notepad. Add the following styles to the table.schedule declaration: table.schedule {border: 10px outset rgb(153, 0, 153); border- collapse: collapse; font-family: Arial, Helvetica, sans-serif; font- size: 0.7em} Go to the bottom of the style sheet and add the following styles for the table header and first column: table.schedule thead {color: white; background-color: rgb(203, 50, 203)} table.schedule col.firstCol {background-color: rgb(255, 255, 192)} Save your chanes and refresh your browser. Verify that the table text and backgrounds have changed.
Set the Width of the Table Reducing the text size and changing the font made the table more compact. Kyle thinks this makes it hard to read and would like to expand the table to fill the page. To do this add the following attribute to the table.schedule declaration: table.schedule {border: 10px outset rgb(153, 0, 153); border- collapse: collapse; font-family: Arial, Helvetica, sans-serif; font-size: 0.7em; width: 100%} Save your changes and refresh your browser.
Set the Table Column Width Kyle notices that the column widths vary and that the Time column is very small. He would like to make the column width more uniform. To do this add the following style to the firstCol selector: table.schedule col.firstCol {background-color: rgb(255, 255, 192); width: 7%} And add the following style to the bottom of the style sheet: table.schedule col.daycols {width: 7%} Save your changes and refresh your browser.
Set the Row Height Kyle also wants to increase the height of the rows to provide more visual space for the table data elements. To do this add the following style to the bottom of the style sheet: table.schedule thead tr {height: 20px} table.schedule tbody tr {height: 30px} Save your changes and refresh your browser. Verify that the row heights have changed.
Align the Text in the Cells Kyle would like all of the program names to be aligned at the top of the cells. To do this add the following style to the bottom of the style sheet: table.schedule tbody td {vertical-align: top; padding: 5px} Save your changes and refresh your browser. Verify that the cell data is aligned to the top of the cells.
Apply a Caption Style Kyle likes the new table design but he would like the table caption to be aligned in the top-right corner of the table. To do this add the following style to the bottom of the style sheet. caption {caption-style: top; text-align: right} Save your changes refresh your browser.
Turn in your work Upload your KPAF folder to Google Drive When the folder is finished uploading, click on the Share button. Click on Advanced Change the permission from Private to Anyone with the link can view. Copy the link and past it into your Google Docs Journal.