Kevin Murphy Introduction to Tables Masters Project CS 490.

Slides:

Advertisements

Similar presentations

HTML TABLES EXPLAINED. What is a TABLE? The HTML table allows web designers to arrange & organize data -- text, images, hyperlinks, forms, form fields,

Advertisements

Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table Modify Your Tables Appearance Create Page Layouts with.

Designing Web Pages Tables part one. Using Tables for Page Layout 2.

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 6: HTML Tables.

Internet Basics & Way Beyond!

Working with Web Tables

Tutorial 4: Designing a Web Page with Tables

Cos 125 Day 22. Agenda Assignment 6 Not corrected Waiting for tune-ins Assignment 7 is posted Assignment 7 Due April 2PM Left to do 1 Assignments.

Introducing Web Tables

Constructing Table by Using HTML

XP Creating Web Pages with HTML Using Tables. XP Objectives Create a text table Create a table using the,, and tags Create table headers and captions.

Using HTML Tables.

HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.

Images and Tables. Displaying Image Attributes: SRC= " mypic.gif " – Name of the picture file SRC= " pic/mygif.jpg " – Name of file found in pic directory.

What is a TABLE? The HTML table allows web designers to arrange & organize data -- text, images, hyperlinks, forms, form fields, other tables, etc. Tables.

Notes Ch. 12—Creating Tables Web Page Design. Why Use Tables? Tables are used to create a variety of items such as calendars, charts, and spreadsheets.

INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.

Using HTML to Create Tables in Web pages Connie Lindsey November 2005.

HTML Essentials Tables and Table Tags. Overview Use of Tables goes beyond tabulating data Frequently used to format Web pages / control layout Especially.

Chapter 5 Working with Tables. Agenda Add a Table Assign a Table Border Adjust Cell Padding and Spacing Adjust Cell Width and Height Add Column Labels.

Identifies the Structure Table Row Column 1 Table Heading Column 2.

CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.

1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.

CHAPTER 11 Tables. How Are Tables Used Data Display  Very tidy and very useful Better Text Alignment  Putting text in tables allows you to format indents.

HTML Overview Part 2 – Paragraphs, Headings, and Lines 1.

HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.

Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple.

Internet Skills An Introduction to HTML Alan Noble Room 504 Tel: (44562 internal)

Actual Building the Pages Tables. Using Table Elements  To build effective page templates, you must be familiar with the HTML table elements and attributes.

HTML Overview Part 4 – Tables 1. HTML Tables  Tables are defined with the tag pair.  A table is divided into rows with tag pairs. o tr stands for "table.

HTML: Tables & Frames Internet Technology1. HTML: Tables Table tags ► surround the entire table ► header row (text is boldfaced) ► surround each row ►

Tables Module 2: HTML Basics LESSON Extension. Module 2: HTML Basics LESSON Extension Lesson Overview In this lesson, you will learn to:  Create tables.

HTML 58.51A Tables!. Why Tables? n Complete control of you web page layout. n Basically, you can place the content you want, where you want it, with little.

Designing a Web Page with Tables. A text table: contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing.

Tutorial 5 Working with Tables and Columns

Department of Information Technology Chapter 9 – Creating Tables Lecturer: Ms Melinda Chung.

Tutorial 5 Working with Tables and Columns

Html Tables Basic Table Markup. How Tables are Used For Data Display Tables were originally designed to display and organize tabular data (charts, statistics,

HTML: Tables & Frames Internet Technology.

Introducing Web Tables. Tables for tabulating items  Better looking  More flexibility  More efficient to explain information than plain text.

TABLES 1. In this chapter you will learn that tables have many uses in HTML. Objectives: Upon completing this section, you should be able to: 1. Insert.

CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.

Tables in HTML. Table Tag HTML tables always begin and end with a table tag. Syntax:

Basic Table Elements. 2 Objectives Define table elements Describe the steps used to plan, design, and code a table Create a borderless table with text.

Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 5: Working with Tables Kelly L.

CIS234A Lecture 8 Instructor Greg D’Andrea. Review Text Table contains only text, evenly spaced on the Web page in rows and columns uses only standard.

Unit 4 Create and Use Tables. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/08/2009 Period : Summary: Reasons for using tables Unit 4 Page 1 Display.

How To Create HTML Tables. Table Structure General HTML code for a Web Table: table cells table cells.

HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …

Using Tables for Layout INP150 Session #8. Layout Map out your page Design with paper and pencil Determine number of rows and columns you need Determine.

Creating Tables in a Web Site HTML 4 Created by S. Cox.

COS 125 DAY 14. Agenda  Assignment 6 DUE  Assignment 7 Posted Due March 9:35 AM  Quiz 2 will be on March 30 Chapters M/C and 4 Short.

Web Page Tables GMU-Teaching with Technology. Table Characteristics: Looks like a news page Contains columns and rows.

REEM ALMOTIRI Information Technology Department Majmaah University.

Kevin Murphy More Tables Masters Project CS 490. Kevin Murphy An Additional Attribute n BGCOLOR -For changing the background color for the table or a.

Web111a_chapt04.ppt HTM: Section 4 Tables Table Types Text table elements Easy to use Use fixed-font text (font family monospace) Andale Mono Courier Monaco.

Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5: HTML Tables.

TABLES IN HTML No, not that kind of table!! THIS KIND!!

TABLES. Session Checklist ► Learn the ways that tables can help you organize data on your Web site ► Learn how to prepare a spreadsheet-like table that.

Tutorial 5 Working with Web Tables. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Learn and Apply the structure of.

CIS101 Introduction to Computing Week 07 Spring 2004.

Tutorial 5 Working with Web Tables

LAB Work 02 MBA 61062: E-Commerce

Tutorial 5 Working with Tables and Columns

Tutorial 5 Working with Web Tables

Using HTML Tables SWBAT: - create tables using HTML

Site Development Foundations Lesson 6

Lesson 5: HTML Tables.

Presentation transcript:

Kevin Murphy Introduction to Tables Masters Project CS 490

Kevin Murphy Tables n Tables are useful for organizing large bodies of information so that the reader can quickly see the overall picture. n Tables on Web pages are similar to spreadsheets or tables in word processing programs. n Tables are organized in columns (vertical) and rows (horizontal). n A cell, where data is placed, is the intersection of a column and a row.

Kevin Murphy Tables in HTML n Since it is difficult to picture how a table will appear on a Web page when looking at the HTML code, plan and sketch your table on paper first. n Plan for a lot of experimenting, testing, re- adjusting code, and testing again until you get what you want. n HTML editors, spreadsheet programs, and word processing table programs can help with table creation.

Kevin Murphy Basic Table Tags Other:

Kevin Murphy Some Attributes BorderRowspan Width, HeightColspan AlignCellspacing NoWrapCellpadding (In addition, any cell can contain text and/or HTML codes including lists, links, forms, or other tables.)

Kevin Murphy Sample: Final Table Our Daily Offerings

Kevin Murphy Create the Table First, Plan the Table on Paper Our Daily Offerings

Kevin Murphy Then, Type the Table Contents Our Daily Offerings

Kevin Murphy Add the Tags Crab Scallop Lamb Rib Lunch $10 $14 $16 $14 Dinner $21 $24 $29 $23

Kevin Murphy Add a Caption Our Daily Offerings OR Our Daily Offerings Crab Scallop Lamb Rib

Kevin Murphy NOWRAP Example Use NOWRAP to get this Not this

Kevin Murphy Code the NOWRAP Attribute Our Daily Offerings Crab Scallop Lamb Prime Rib

Kevin Murphy Enhance the Table Span a heading across 2 columns To get this Our Daily Offerings Seafood Meat Add this

Kevin Murphy Enhance the Table Add a Border, Cell Spacing, and Cell Padding Syntax: Border or Border=value (default is 1 pixel) Cellspacing=value (default is 2 pixels) —Adds space between cells— Cellpadding=value (default is 1 pixel) —Adds space around cell contents—

Kevin Murphy Aligning Cell Contents n ALIGN=Left, Center, Right -Attribute for table row tag -Attribute for and cell tags default is center default is left n VALIGN=Top, Bottom, Middle -Attribute for table row tag -Attribute for and cell tags Default value is middle

Kevin Murphy Width and Height Attributes n Browsers generally display a table as large as it needs to be for the contents. n A column or row is as wide as the widest cell within that column or row. n The size of the table, column, or row can be controlled with attributes expressed in pixels or as a percentage.

Kevin Murphy Height, Width Examples (Displays the table as a % of browser window) (Displays as a 100 pixel square) (Displays as 2% of the width and height of the entire table)