1 HTML Tables. 22 Objectives You will be able to Create tables in HTML.

Slides:



Advertisements
Similar presentations
The Web Wizards Guide to HTML Chapter Six Tables.
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.
Chapter 3 – Web Design Tables & Page Layout
Working with Web Tables
Introduction to HTML & CSS
CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style.
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Creating Tables Text Tables -created by using preformatted tags. Graphical Tables - created using Table Structure with HTML.
4.01 Cascading Style Sheets
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
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.
Bayu Priyambadha, S.Kom. for long documents, you can even have links to other locations in that same document  … where ident is a variable for identifying.
Creating Tables in a Web Site Using an External Style Sheet
Tutorial 6 Creating Tables and CSS Layouts. Objectives Session 6.1 – Create a data table to display and organize data – Modify table properties and layout.
HTML, Third Edition--Illustrated Introductory 1 HTML, Third Edition Illustrated Introductory Unit F Working with Tables.
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.
Principles of Web Design 6 th Edition Chapter 10 – Data Tables.
1 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles are normally stored in Style Sheets  Styles.
CHAPTER 10 Formatting Tables and Forms. Using Tables the Right Way  HTML and XHTML have a LOT of tags dedicated to building a table  If you have only.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.
XHTML/CSS Week 3. This Week  Quiz to revise last week (XHTML and DW)  CSS - Part 2  Using HTML Tables.
CSS CSS is short for C ascading S tyle S heets. It is a new web page layout method that has been added to HTML to give web developers more control over.
Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 7.
Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
Tutorial 5 Working with Tables and Columns
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,
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
Tutorial 5: Tables Session OBJECTIVES Marking row groups Marking column groups Setting the table frame Specifying the table’s internal gridlines.
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.
1 More About HTML Tables and Images. 22 Objectives You will be able to Create tables in HTML. Include images in your HTML page. Create links to other.
DIV, Span, CSS.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
Cascading Style Sheets (CSS). A style sheet is a document which describes the presentation semantics of a document written in a mark-up language such.
26 HTML Tables … surround table … surround each row … surround each cell … like, but bold and centered by default (for table headings) … table title No.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
11/12/2015 Box Model Reed Crouch. 11/12/2015  HTML elements can be considered as boxes. In CSS, the term "box model" is used when referring to layout.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
How to… Cascading Style Sheets. How to Insert a Style Sheet When a browser reads a style sheet, it will format the document according to it. There are.
Goal See below /tables, Html-2-1.pptx rev 01/19/2016.
Positioning Objects with CSS and Tables
1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.
OV Copyright © 2008 Element K Content LLC. All rights reserved. Working with Web Pages  An Introduction to Cascading Style Sheets  Format a Web.
Tutorial 5: Tables Session OBJECTIVES Create a table Insert a table summary Insert a table caption Add rows and cells Merge Cells inside a Table.
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5: HTML Tables.
Group 9: Through examples, explain how to build a css navigation bar. Presented by: Daniel Ku, Matt Iannacci & Iphia Henry.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 5.
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.
Cascading Style Sheets Using HTML. What are they? A set of style rules that tell the web browser how to present a web page or document. In earlier versions.
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
Creating Web Documents CSS examples (do more later) Lab/Homework: Read chapters 15 & 16. Work on Project 3, do postings.
Positioning Objects with CSS and Tables
Tutorial 5 Working with Tables and Columns
CS134 Web Design & Development
For the World Wide Web Styling Tables with CSS
Web Design & Development
Principles of Web Design 5th Edition
Lesson 5: HTML Tables.
Positioning Objects with CSS and Tables
Presentation transcript:

1 HTML Tables

22 Objectives You will be able to Create tables in HTML.

HTML Tables HTML Tables are intended for display of tabular data. Also used to control page layout. Not a “legitmate” use of the table tag, but widely practiced by professional programmers. 3

44 HTML Tables HTML tables permit you to have some control over layout while leaving some decisions to the browser.... Define rows inside a table... defines a row Define cells inside a row... defines a cell within a row... defines a “table heading” cell Put text or other HTML element into a cell Including another table

5 Example: Eyeglass Prescription Let’s create this table as HTML in Visual Studio.

Create a New File in Visual Studio 6

HTML Page 7

88 Visual Studio Sets Up Skeleton

99 HTML Table Example: Eyeglass Prescription

Table Content To save some typing, let’s download the table content from the class web site: 10 Click on Rx.txt to open in browser.

11

12 Eyeglass Prescription: Heading Eye Sphere Cyl Axis Prism Base PD

13 Eyeglass Prescription: Rows 2 and 3 OD BI OS BI 28.00

Copy table content into Visual Studio Copy table content in browser. Paste into element in Visual Studio. 14

15

Save As... 16

Rx.html 17 Double click the file icon to view in your default browser.

Rx.html in Chrome 18

Add a Style Sheet 19 In Visual Studio: File > New File

The Style Sheet 20 Save on desktop as RxStyles.css

Link the Style Sheet 21 Save Rx.hml on the desktop

22 The Table in Chrome

23 Border s The “border” style in the tag only puts a border around the entire table. If we want borders around the cells we have to add style rules for and

24 Borders for Cells

25 Table with Borders on Cells

26 Cell Spacing But I really want just one line between each pair of cells. The CSS property border-collapse controls this.

27 Table with No Cell Border Spacing

28 Cell Padding But the cells seem crowded now. To provide some margin inside each cell use the padding property on and

29 Table with Cell Padding

30 Alignment By default anything in a cell is aligned to the left and vertically centered. To specify horizontal alignment use text-align

31 Table with Cell Text Alignment

32 Alignment All data cells are now right aligned. The alphabetic cells should be centered. We can define a class for this.

33 Alphabetic

34 Alignment for Alphabetic

35 Page in Chrome Alphabetic cells are now centered.

36 How to Center the Table on the Page By default the table is in the upper left corner of the page. I would like to have it centered on the page. text-align:center doesn’t do this. It only applies to text within its container. margin:auto will make the margins on each side of the table equal. Center the table horizontally.

37 RxStyles.css table { font-family: Arial, Sans-Serif; border:solid 1px; border-collapse: collapse; margin:auto; }

38 Table in Chrome End of Section