1 / 24

HTML

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.

chamomile
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML For the World Wide Web Styling Tables with CSS

  2. 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. • You will need to unblock all of the files

  3. 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.

  4. 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.

  5. 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

  6. 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.

  7. 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.

  8. 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

  9. 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.

  10. 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.

  11. 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.

  12. 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

  13. 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.

  14. 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.

  15. 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)

  16. 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.

  17. 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.

  18. 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, Highest precedence Table Cells Rows Row Group Lowest precedence Column Group Table

  19. 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.

  20. 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.

  21. 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.

  22. 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.

  23. 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.

  24. 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 print your files and capture a screen shot of the page. Turn them in with your name in the comment sections of each file.

More Related