{[ promptMessage ]}

Bookmark it

{[ promptMessage ]}

Advanced XHTML & CSS - Tables And Forms

Advanced XHTML & CSS - Tables And Forms - CIS 4004...

Info icon This preview shows pages 1–9. Sign up to view the full content.

View Full Document Right Arrow Icon
CIS 4004: Web Based IT (Adv. XHTML/CSS - Tables) Page 1 © Dr. Mark Llewellyn CIS 4004: Web Based Information Technology Spring 2011 Advanced XHTML & CSS – Tables Department of Electrical Engineering and Computer Science University of Central Florida Instructor : Dr. Mark Llewellyn [email protected] HEC 236, 407-823-2790 http://www.cs.ucf.edu/courses/cis4004/spr2011
Image of page 1

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
CIS 4004: Web Based IT (Adv. XHTML/CSS - Tables) Page 2 © Dr. Mark Llewellyn In HCI and interface component is what the user utilizes to interact with your webpage. In a sense, an interface component encompasses all the supporting elements for your page’s content: links, menus, forms, tables, and so on. We’ll be examining how these components should be written in XHTML to be valid and accessible, and how to style them with valid CSS in a variety of ways to meet the design needs of your projects. We’ll start with tables. Designing Interface Components - Tables
Image of page 2
CIS 4004: Web Based IT (Adv. XHTML/CSS - Tables) Page 3 © Dr. Mark Llewellyn As we’ve mentioned before, in the past, tables were a widely abused technique for creating page layouts full of presentation markup. CSS has provided a much cleaner and more adaptable method for accomplishing page layouts, so do not use tables as a technique for designing page layouts. However, tables should still be used for their designated purpose – laying out grids of data in rows and columns in the same manner in which it appears in spreadsheets or other applications where tabular data is required. Tables In XHTML and CSS
Image of page 3

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
CIS 4004: Web Based IT (Adv. XHTML/CSS - Tables) Page 4 © Dr. Mark Llewellyn Tables in XHTML work much the same way they do in a spreadsheet or word processor application and resemble a matrix (grid). The entire table in XHTML is surrounded by the start table <table> tag and the end table tag </table>. You choose how many rows and columns you need for your table. The main body of a table is made up of rows and columns, like a matrix. In XHTML, you construct your tables one row at a time. Each row begins with an opening table row <tr> tag. Each column within that row contains the open and end tags for the table data <td> element. Tables In XHTML and CSS
Image of page 4
CIS 4004: Web Based IT (Adv. XHTML/CSS - Tables) Page 5 © Dr. Mark Llewellyn After the last <td> element is closed for the last column, the row ends with the ending </tr> tag. This is the definition for a row that contains three columns. Shown on the next page is the markup for a simple XHTML table. Tables In XHTML and CSS <tr> <td> column 1 </td> <td> column 2 </td> <td> column 3 </td> </tr>
Image of page 5

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
CIS 4004: Web Based IT (Adv. XHTML/CSS - Tables) Page 6 © Dr. Mark Llewellyn Tables In XHTML and CSS
Image of page 6
CIS 4004: Web Based IT (Adv. XHTML/CSS - Tables) Page 7 © Dr. Mark Llewellyn The border attribute is used to define the border of all elements inside the table. The “1” means a 1 pixel wide default style border is applied. Without this, there will be no gridlines at all in or around the table. We’ll see additional styling with CSS later, but this is a minimal style for a table.
Image of page 7

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
CIS 4004: Web Based IT (Adv. XHTML/CSS - Tables)
Image of page 8
Image of page 9
This is the end of the preview. Sign up to access the rest of the document.

{[ snackBarMessage ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern