CIS89A - 8. Tables

From WikiEducator
Jump to: navigation, search
Mathematical bridge, Cambridge

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


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

Reading guide

  • 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?


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 * rows columns, headings, borders, padding, span rows, span columns, position text within table cells, position images in table cells
    • NOTE: These are HTML Table properties and attributes
    • Coding Challenges - some of these can be implemented as CSS styling

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

  2. Read Chapter 11. Using Tables in the textbook.

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

  4. 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.
  5. Use all the elements and tags within your page.
    ** NOTE: These are HTML Table properties and attributes
    ** Coding Challenges - some of these can be implemented as CSS styling. Some browsers do not support some of the equivalent CSS properties.
    Publish your HTML file.
  6. Submit the web address of your assignment page file to the Using Tables assignment.
  7. Post a link to your assignment page file and any comments or questions about the assignment to the Using Tables discussion.

  8. 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 Identity Theft Quiz: A Quiz for Consumers.

  9. Web Literacy - PARTICIPATE - In the Web Literacy framework description, review the skills in the PARTICIPATE group. What skills you don't have yet or need to work on? Look it up. In the Web Literacy - PARTICIPATE discussion, post a link to a resource that improved your understanding and skills in these areas.

  10. Success Skills - Make it - Creativity and Innovation. Is it possible to learn to be creative or innovative? Many authors think so and provide some suggestions for getting those creative juices flowing. Review 2-3 articles from Success skills - Make it. Pick one article you would recommend from the selection list. Find another article online that would be appropriate to add to the selection list. Post a link and a brief summary of the reasons for each of your selections to the Success Skills - Make it discussion.

  11. Programming - 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. An introduction to JavaScript by Khan Academy - Video, step-by-step tutorials.
  12. 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?

  13. Group Project groups discussions - Review the posts in your group discussion. Are you working as a group? Contribute to the tasks. Suggest other tasks and activities that would be appropriate for online group work.

Icon multimedia.gif



How to Style Tables with CSS - YouTube
video talks about styling tables and is 4 min and 58 seconds long. Besides this video, creator has a lot of other videos on his channel. also class or id for elements
<p class="...
Top 25 Simple CSS3 & HTML Table Templates And Examples 2018 - Colorlib
"o help assess online data better is “table” — the table element can be used to display raw data in a selection of different appearances; tables. HTML tables are not necessarily somethin...
Using Tables in Page Design
Tables are useful for laying out text and images on in Web page. Before continuing with instructions on how to do this, let us first consider why there is a need to manage layout. browser's &#3...
HTML Tables Tutorial - YouTube
video 9:37 - how to code HTML tables and add basic styling with CSS - tabular data, grocery list example with multiple items and values. when to use them
<p class="diigo-tags&q...

Coding, programming

  • Hour of Code - Write your first computer program - 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.
  • Eloquent JavaScript A Modern Introduction to Programming - an introduction to the JavaScript programming language and programming in general. Originally written and published in digital form, includes interactive examples and a mechanism for playing with all the example code. This version is released under an open license.
  • The 2015 Top Ten Programming Languages - The big five—Java, C, C++, Python, and C#—remain on top. The big mover is R, a statistical computing language that’s handy for analyzing and visualizing big data.
CodeCombat – UKEdChat
Learn how to code by designing the perfect programming to enable you to battle in a medieval realm. This site has been developed especially for children and begins with easy challenges and build to...
Made with Code | Projects
Check out some of the amazing things you can do with code. Discover your coding superpowers on an adventure with Wonder Woman. Music Mixer EDM, country, or hip hop? LED Dress Design a ZAC Zac Posen... Drag and Drop Mobile App Builder for iOS and Android
anyone to create beautiful and powerful mobile apps. Build your own apps by dragging and dropping your favorite components and connecting them together with blocks.
<p class="di...
CodeMonkey is a fun and educational game environment where students learn to code in a real programming language, no previous experience needed. Using CoffeeScript, students learn to code and then...