CIS89A - 8. Tables, Forms

From WikiEducator
Jump to: navigation, search

Rows and columns - Tables

Tables can be used to display numerical information - like a spread sheet.

Data collection - Forms

Collecting information can be as simple as requesting comments from readers, or as complex as a final exam for an upper division college course. Forms provide a broad range of functionality to validate and format input information. Forms can guide the user through complex information gathering processes and make the information ready for further processing by other applications.

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
  • understand the concept and uses of Forms in web pages
  • create a basic form
  • validate form content
  • make forms more user-friendly
  • style forms for layout
  • understand the concept and uses of JavaScript and HTML5 API in web pages


  • table, row, column, cell, padding, borders, margins, spacing, width, height, alignment, horizontal, vertical, caption
  • text, radio button, data area, checkbox, submit, menu, hidden controls, file upload, validate, pattern, action, required fields, JavaScript, API, objects, methods, event handler, cookies, storage, offline, geolocation, canvas

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?
  • What types of input can be processed in a form?
  • What validation can be applied to form input?
  • How can information entered in a form be processed?
  • Why would you want to include client-side validation in a form?
  • What are the new functions that are introduced in HTML5? Why are these important to web page developers?


Coding project title and required elements

  • tables & forms - table, tr, th, td, border, width, height, margin, padding, text-align, background-color, 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: some of these can be implemented as CSS styling. For this coding project, use HTML Table properties and attributes
  • form, input, type, name, value, placeholder, button, checkbox, datetime, email, radio, url, maxlength, textarea, size, color, option, file, pattern, action, label, meter,
  • input form, text box, checkbox, pull down menus, prefilled entries, color selector, gauge, submit button

  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. Review the Media section (below - scroll down) for links to resources for this module.

  2. Textbook - Read HTML and CSS Visual Quickstart Guide, Chapter 18. Tables, 16. Forms

  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. Test drive Google form - Google Drive is very convenient for working collaboratively and sharing your work. The Form creator can be used to collect all sorts of data. Some teachers are even using Google Forms for quizzes and exams.
    Create a Google Form to gather multiple kinds of information. Use several different Google Forms question types appropriately. Note that Google automatically sets up a spreadsheet to capture responses. Post the link to your "Share" form to the Google Form discussion.
    Fill in the Forms posted by 3-5 others and submit. Check your own form to view the results.

  5. Using Tables and Forms - In a new coding project, use the assignment elements and tags to create and format tables and forms. Add these tables. You can include other tables to show other table formatting, if you wish.
    * a Tic-Tac-Toe "game" display - just 3x3 grid with Xs and Os centered
    * 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.
  6. Use all the elements and tags within your project.
    ** 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.
  7. action=mailto - Once you collect information in your form, you need to do something with it. Normally this requires interaction with a program. One alternative is to have the contents of your form emailed to yourself. NOTE this doesn't always work. It depends... on your users' browsers and your email reader. However, if it works, it is an easy way to understand how information input into a form can be passed along for processing. See Mailto Forms HTML Forms Tutorial, and also When Mailto Forms Don't Work. If it works - Great! If not, you should get the idea about how this could work.
  8. Submit the web address of your coding project to the Using Tables and Forms assignment.
  9. Post a link to your coding project and any comments or questions about the assignment to the Using Tables and Forms discussion.

  10. Blogs/Vlogs - Consider subscribing to the blogs or vlogs (video) of people or groups that regularly provide new and interesting information about a subject that interests you. Blogs/Vlogs are used by individuals, companies, colleges and organizations as a way to provide updates and news to "subscribers" - usually by email. But they are also viewable as web pages, so you don't have to subscribe to see the information.
    Pick two Blogs (or Vlogs) you find interesting and start reading them. Some that I like - Scientific American, Gizmodo.
    In the Blogs discussion, for one that you selected, post a link and a brief description and why you selected it.

  11. Portfolio is the new resume - As a job seeker and web developer, a portfolio is essential to show who you are and what you can do. Find examples of portfolios. Look for resources that describe how to create a portfolio with suggestions for what to include and how to present it. Unless you have some other web site to build, consider creating your own portfolio for your web site project. Select one portfolio and one how-to resource and post to the Portfolio discussion. Describe how these resources would help you create your portfolio.
    Review the selections of 2 others.

  12. Themes - Popular blogging software includes WordPress and Weebly. WordPress is available as an "open source" application you can download and run on your own web server, or as a hosted service at For these, the content of the site pages are stored separately from the format information by making extensive use of CSS functionality. A "theme" created with Cascading Style Sheets (CSS) can be selected and applied to the site content. Other sources such as Bootstrap sell "themes" (complete CSS stylesheets) as well.
    Look through the Weebly themes or WordPress themes that are provided. It is important to understand how powerful CSS is for determining the look and layout for a site. The pages for your site don't have to have all the formatting coded on each page.
    Select 2 examples of themes from the themes gallery. The content is the same - text, associated pictures, links and category information. What are the noticeable differences between the page displays? What layout features are important to you and the display of your content? Post links to the gallery pages for the themes you are comparing, and a brief description of the differences (2-3 sentences), and your preference to the Weebly / WordPress themes discussion. .

  13. As new web-based services are provided and people share information, social media has evolved. Here are 50 of the biggest social media questions answered. Select 2 answers that you didn't know before. Why is this information important? Post your new information and a description of your own social media experience in the discussion Social Media Questions.

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

  15. Group Project groups - Web design evaluation criteria. In addition to understanding the information presented in the resources, for each web site you visit, take an extra minute and examine the site design, layout and usability. Use the evaluation criteria to guide your review of the sites you visit. Select one site you visited and post note about the site design based on one of the criteria in the evaluation description along with the link to the site. What is something important and interesting that you learned about web design? Do you have questions about good web design? Share with your group in the Group discussion.

Icon multimedia.gif


Textbook - HTML and CSS Visual Quickstart Guide

  • 18. Tables
  • 16. Forms


55 Free Beautiful CSS CSS3 Table Templates - freshDesignweb
The table is a great way to show information about various prices for its products or services, especially, some hosting company, they need to present the price of each plan clearly on table to eas...
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. for doers who want to learn h...
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, simple coding example
<p cl...
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...


HTML Tutorial for Beginners: 19 Creating a Submit Button for Forms - YouTube
video explains how to create a submit button for html forms. It applies to Module 9 and is 3 minutes and 52 seconds long. how to build and grow your business, find niche opportunities, market your...
Styling HTML forms - Learn web development | MDN
use CSS with HTML forms to make them more beautiful. Surprisingly, this can be a little bit tricky. For historical and technical reasons, form widgets don't mesh well with CSS. Because of those...
How To Create a Responsive Form with CSS
Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other. Use a <form> element to process the input. You can...
Style Web Forms Using CSS — SitePoint
forms should be beautiful, easy to use, and should look consistent with the rest of our website. We can do this easily with CSS. The process isn’t difficult, you just can to know what each tag do...


Tools and Resources relating to: ePortfoliocloud-based Portfolio Platform in the market, whereby users can aggregate and showcase all digital evidence of what they have created, achieved and master...
7 Steps for Writing Your Portfolio’s Biography ‘About Me’ Page
your “About Me” page is the most-visited page on your online portfolio. Check your stats and you’ll see that it’s true. After they see your images, it’s the natural next step for both cli...
Advice for Writing a Technical Resume | CSS-Tricks
When it comes to writing a resume, It’s helpful to think about the human aspect first and foremost. Imagining a hiring manager’s perspective will give you an edge because it helps speak to them...
PortfolioGen - Premium Subscription Pricing
PortfolioGen's basic service is always free. For those that require additional storage, customization and added features we offer a Premium monthly and yearly subscription service. You can chec...


Cultural factors in web design | Creative Bloq
People need to feel at home with the cultural references in our designs. By using the variables above, we can create culturally responsive sites that are accepted and used by people across the glob...
Webmaker/WebLiteracyMap/Building - MozillaWiki
"Composing for the WebCreating and curating content for the Web Inserting hyperlinks into a web page Identifying and using HTML tags Embedding multimedia content into a web page Cr...
Tips for Getting Started Writing for Web Accessibility | Web Accessibility Initiative (WAI) | W3C
writing web content that is more accessible to people with disabilities. These tips are good practice to help you meet Web Content Accessibility Guidelines (WCAG) requirements. Follow the links to...

2016.3 1976 . 2018.3 4114 . 2018.11 6180