CIS 195 - Web Authoring 1

HTML Tables

Weeks 1-5	Weeks 6-11
1. Intro to HTML	6. Layout with CSS
2. More HTML, file paths	7. CSS Grid and Flexbox
3. Site structure and navigation	8. HTML Forms
4. Formatting with CSS	9. Multimedia
5. Midterm, Project Propposal	10. Tables, Project Completion
	11. Final

[Topics by Week for the Ten-Week Term]

Table of Contents

[TOC]

Announcements

• Review due dates (lab and quiz).
• Are there any questions on lab 5?
• How is the term project coming?

Introduction

• What is a table–in general?
• Where are tables commonly used?

Structure of a Table

Tables are constructed using multiple elements (which means multiple tags). A table with two rows and three columns would be written in HTML like this:

<table>
    <tr>   <!-- tr = table row, this is the beginning of a row -->
        <td>row 1, column 1</td>    <!-- td = table data, this is a cell -->
        <td>row 1, column 2</td>
        <td>row 1, column 3</td>
    </tr>
    <tr>
        <td>row 2, column 1</td> 
        <td>row 2, column 2</td> 
        <td>row 2, column 3</td>
    </tr>
</table>

The table will be rendered in a browser like this:

<table

row1, column 1 row1, column 2 row 1, column 3 row2, column 1 row2, column 2 row 2, column 3 ## Borders Borders can be added using CSS. For example: ```css table, td { border: solid; border-collapse: collapse; } ``` The table will be rendered like this:

row1, column 1	row1, column 2	row 1, column 3
row2, column 1	row2, column 2	row 2, column 3

## Headings A special type of table cell is a heading, . The following code can be placed above row 1 and provides headings for the columns: ```html ``` The table will be rendered like this: | column 1 | column 2 | column 3 | | --------------- | --------------- | --------------- | | row 1, column 1 | row 1, column 2 | row 1, column 3 | | row 2, column 1 | row 2, column 2 | row 2, column 3 | ## Row and Column Spans The *rowspan* attribute is used to make a ` ``` The table will be rendered like this:

column 1	column 2	column 3
` element stretch across two rows. The *colspan* attribute is used to make a `	` element stretch across two columns. ```html
row 1, columns 1 and 2		rows 1 and 2, column 3
row 2, column 1	row 2, column 2

row 1, columns 1 and 2		rows 1 and 2, column 3
row2, column 1	row2, column 2

## Captions ```html ``` Captions can be positioned using CSS. For example: ```css caption { caption-side:bottom; } ``` ------ ASP.NET Core MVC Lecture Notes by Brian Bird is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. ------

Table Example

This site is open source. Improve this page.