User:Vtaylor/CIS 89A HTML and CSS/CIS89A - Tables

Rows and columns - Tables
 * Tables can be used to display numerical information - like a spread sheet. But tables can also be used to make web page content look great by providing a neat way to place content on the page.

Learning outcomes
 * understand the concepts and uses of tables in web pages
 * create a basic table structure
 * format tables within pages
 * format content within table cells

Keywords
 * table, row, column, cell, padding, borders, margins, spacing, width, height, alignment, horizontal, vertical, caption

Study notes
 * What are the main components of a table in HTML?
 * How can tables be used to format content? Why is this necessary?
 * What are some content formatting options to increase readability?

== ==


 * Wendy Willard - Chapter 11. Using Tables
 * HTML Dog HTML Beginner Tutorial
 * Visual Quickstart - Chapter 18. Tables


 * 10 CSS Table Examples

Coding, programming
 * Hour of Code - Write your first computer program Code.org - Learn the basic concepts of Computer Science with drag and drop programming. This is a game-like, self-directed tutorial starring video lectures. Learn repeat-loops, conditionals, and basic algorithms.


 * Hour of Code - Javascript - An introduction to JavaScript by KhanAcademy - Learn the basics of JavaScript programming while creating fun drawings with your code. Video, step-by-step tutorials


 * CodeAcademy - write code and see the results right away.

== Assignments==

Assignment file name and required elements
 * cis89tables1 - table, tr, th, td, border, width, height, margin, padding, float, text-align, background-color, class, colspan, rowspan, thead, tfoot, tbody, colgroup, style,


 * 1) Review the Keywords and Study questions at the top of this page. These will help you look for important ideas in the rest of assignments for this module.


 * 1) Read  Chapter 11. Using Tables in the textbook.


 * 1) Tables - There are many different uses for tables, in addition to usual spreadsheet format for neatly displaying numbers. Find 2 examples of interesting uses of the table element and post links and a sentence about why you selected each to the Examples of Tables discussion. Some tables may not be obvious, so you need to check the source code to find the actual table element. Review 2 others.


 * 1) Personal information - As a online technology user, you are always at risk of being the target of someone who is trying to take your personal information. Detecting online scams and 'phishing' by employing recognized tools and techniques is important. To gauge your personal risk, and find tips for lowering it, take the 10-question safety quiz at IDsafety.net. http://idsafety.net/


 * 1) Web Literacy - In the Connecting description, review the skills associated with   Sharing & Collaborating - Jointly creating and providing access to Web resources; and  Community participation - Getting involved in Web communities and understanding their practices  How are you doing? Do you have these skills? How do you get them? Why are these particular skills important? In the WebLiteracy - Connecting discussion, post a brief status report about your understanding and skills in the Sharing & collaborating and Community participation areas.


 * 1) Learning Literacies - Protect it - Digital Citizenship. We have already looked at a number of these issues. Here is an opportunity to review 2-3 articles in the Protect it - media selections. Post a link and a brief summary of 1 to the Learning Literacies - Protect it discussion. Review 2 others.


 * 1) Programming and JavaScript - the functionality of a web site can be extended by adding some programming, usually in Javascript.
 * If you are new to programming, write your first computer program.  Hour of Code - Learn the basic concepts of Computer Science with drag and drop programming. This is a game-like, self-directed tutorial. Learn repeat-loops, conditionals, and basic algorithms.
 * If you have some programming experience, learn the basics of JavaScript programming while creating fun drawings with your code. Hour of Code - Javascript - An introduction to JavaScript by KhanAcademy - Video, step-by-step tutorials.
 * 1) In the Programming discussion, write a brief description (2-3 sentences) of your Hour of Code experience. Which tutorial did you do? Do you have any prior programming experience? Would you recommend this activity to others?


 * 1) Using Tables  - In a new  Thimble file, use the assignment elements and tags to create and format tables. Add these tables. You can include other tables to show other table formatting, if you wish.
 * a Tic-Tac-Toe "game" display
 * a table to demonstrate cell padding, spacing and alignment
 * a table for formatting page content with text in one cell and an image in another cell beside it.
 * 1) Adding code comments for clarification and attribution. It is really helpful to explain what you are doing in the HTML code when you are using tables for page formatting. Add comments to your page to say what you have done.
 * 2) Use all the elements and tags within your page. Save your HTML file as cis89tables1.
 * 3) Submit the full name of your assignment file to the  Using Tables  assignment.
 * 4) Post a link to your assignment file and any comments or questions about the assignment to the  Using Tables  discussion.