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.

Slides:



Advertisements
Similar presentations
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.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
HTML Tables Introduction to Tables Introduction to Tables Table Format Table Format Table Captions Table Captions Table Example Table Example Excercise.
Designing Web Pages Tables part one. Using Tables for Page Layout 2.
Working with Web Tables
Chapter 4 – Intermediate HTML 4 Outline 4.1 Unordered Lists 4.2 Nested and Ordered Lists 4.3 Basic HTML Tables 4.4 Intermediate HTML Tables and Formatting.
Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.
Introducing Web Tables
Constructing Table by Using HTML
Using HTML Tables.
Chapter 6 Working with Frames.
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.
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.
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.
XHTML Tables. Tables: Allow us to display information on the page in a uniform fashion. Work well for organizing groups of words, images, and links. Are.
Identifies the Structure Table Row Column 1 Table Heading Column 2.
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.
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.
Lecture: Tables. Table Tags (all container tags) establishes a table (________) establishes a row (________) says what’s in the row more than one TD within.
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.
Basic HTML Workshop By: Preeda Chunjongkolkul (Pete) Systems Librarian/Webmaster
HTML: Tables & Frames Internet Technology1. HTML: Tables Table tags ► surround the entire table ► header row (text is boldfaced) ► surround each row ►
Chapter 12 FRAMES. HOW FRAMES WORK When you view a framed page in a browser, you are actually looking at several HTML documents at once. The key to making.
HTML B OOT C AMP Chapter 10 Tables Kirkwood Continuing Education © Copyright 2015, Fred McClurg All Rights Reserved.
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
Tutorial 5 Working with Tables and Columns
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.
Kevin Murphy Introduction to Tables Masters Project CS 490.
ECA 228 Internet/Intranet Design I Tables. ECA 228 Internet/Intranet Design I Basic HTML Tables Created as a way to present rows and clumns of data.
Tables Web Authoring. This kind of a table THISIs aTABLE THISIs aTABLE THISIs aTABLE THISIs aTABLE.
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 lab5. Drawing a table Tables are the web designer’s best friend and worst enemy. To draw a table we will use:  tag  for raw  tags for column.
Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter.
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.
Chapter 5 Creating Page Templates. Principles of Web Design 2nd Ed. Chapter 5 2 Principles of Web Design Chapter 5 Objectives Understand table basics.
How To Create HTML Tables. Table Structure General HTML code for a Web Table: table cells table cells.
1 Chapter 04: Working with Table By Tharith Sriv.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
20-753: Fundamentals of Web Programming 1 Lecture 6: Advanced HTML Fundamentals of Web Programming Lecture 6: Advanced HTML.
Web Page Tables GMU-Teaching with Technology. Table Characteristics: Looks like a news page Contains columns and rows.
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.
HTML Help book. HTML HTML is the programming language used to make web pages for the Internet. HTML stands for Hyper Text Markup Language. HTML is made.
CIS101 Introduction to Computing Week 07 Spring 2004.
Tutorial 5 Working with Web Tables
Designing a Web Page with Tables
XHTML Tables.
CNIT 131 HTML5 - Tables.
Yourfriendmanoj.wordpress.com Fb/yourfriendmanoj
LAB Work 02 MBA 61062: E-Commerce
Tutorial 5 Working with Tables and Columns
Tutorial 5 Working with Web Tables
Tables:.
XHTML Tables.
Using HTML Tables SWBAT: - create tables using HTML
Web Design and Development
Lesson 5: HTML Tables.
XHTML Tables.
Presentation transcript:

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

The Table tags n n The Nested order: n

Table Attributes n width= “value” n Can be percentage or pixels. n align=”value” n Can be center, right or left (default) n bgcolor=”value” n Hex color or stated color

Table Attributes (cont.) n border=”value” n pixels only n Start with border=“1”, to design and setup table, then make it border=“0”. n bordercolor=”value" bordercolorlight=”value" bordercolordark=”value”

Table Attributes (cont.) n background=”value” n Can use.gif or.jpg n cellspacing=”value” - this is the space (in pixels) between cells. Default = 1 n cellpadding=”value” - this is the space (in pixels) between the edge of a cell and the text/image. n Default = 1

Table Row Attributes n align=”value” n center, right, & left (default) n valign=”value” n Top, bottom, Middle (default)

Table Row Attributes n bgcolor=”value” n Hex color or stated color n bordercolor=”value" bordercolorlight=”value" bordercolordark=”value”

or Attributes n width= “value” n Can be percentage or pixels. n height = “value” n Can only be in pixels.

or Attributes n align=”value” n center, right, & left (default) n valign=”value” n Top, bottom, Middle (default)

or Attributes n background=”value” n Can use.gif or.jpg n bgcolor=”value” n Hex color or stated color

What about that space? n What about that 10 to 20 pixel space in the top and left side of the web page. n In the body tag use: n leftmargin=“0” n topmargin=“0”

Table inside of a table? n Yes! n Just make sure you nest them properly: n u F – F u n

Good Table use... n Creating space for the side bars. n You can create space many different ways in all areas of a table. n Try using a one pixel.gif, and change the size attributes.

n Post your URL including the following elements added to your Web site: Add 2 tables 30 points 5 attributes including a colspan 10 points 2 images in table 10 points 2 links in table 10 points