OIM3690 - Web Technologies

contain

Tables

HTML Table

  • Tables should only be used to display tabular data in a structured and organized way and not for layout purposes.
  • HTML Table tags:
    • <table>…</table>: defines a table
      • They should be the outermost
    • <tr>…</tr>: defines a table row
    • <th>…</th>: defines a table header cell
    • <td>…</td>: defines a table data cell
    • <caption>...</caption>: defines a table caption
      • By default, a table caption will be center-aligned above a table.

HTML Table

  • Remember: Table contains rows, rows contain cells with data.
    • Table columns are not explicitly defined.
  • Example:
    <table>
  <tr>
    <th>Course</th><th>Grade</th>
  </tr>
  <tr>
    <td>Web Tech</td><td>A</td>
  </tr>
  <tr>
    <td>Accounting</td> <td>B+</td>
  </tr>
</table>

Exercise: ex08-1.html

  • Create a webpage for a catalog of start-up company's products
  • The table should have three columns: Product Code, Product Description, Price
  • Top row of the table contains column names: "Product Code", "Product Description", and "Price".
  • Add at least 3 subsequent rows providing product information
  • Add a caption to the table.
  • Name your file ex08-1.html
  • Note:
    1. You can create a table containing other information.
    2. Styling will be added later.

Styles for Tables

  • <table> supports many style properties:
    • background, border, margin, padding, font, text, positioning, etc.
    • Special for <table>
      • Adjacent cells have shared borders: border-collapse: collapse;
  • <td> and <tr> do not support margin and position.

Table Style Example

table {
  border:2px solid black; /*defines the outside border*/
  width:50%; /* sets the width of table to 50% of width of web-page*/
  margin-left:auto; margin-right:auto; /* centers table on page*/
  border-collapse: collapse; /* Adjacent cells have shared borders */
  background: url(images/music.gif); 
  }
td {
  border: 1px solid black; /* defines the border for each cell*/
  vertical-align:top; /* defines the vertical alignment of text in each cell*/
  text-align:center;
   }
tr#top {
  background-color:yellow;
  }

Exercise: ex08-1.html (cont.)

  • Add styles to the table
  • Save ex08-1.html and commit/push to GitHub

Irregular Tables

  • Irregular tables have cells that cross over one or more rows or columns.
  • For a cell that covers two or more columns
    • use <td colspan="x">data</td>,
    • "x" is the number of columns spanned
  • For a cell that covers two or more rows
    • use <td rowspan="x">data</td>
    • "x" is the number of rows spanned

Irregular Table Example

<table>
  <tr>
    <td>1</td>
    <td colspan="2">2</td>
  </tr>
  <tr>
    <td rowspan="2">3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

Irregular Table Example

  • Let's analyze this table first:
    • How is the content organized?
    • How many rows? columns?
    • Which cell needs "rowspan" or "colspan"?
  • Note:
    • Generally, tables should only be used to display tabular data.
    • This exercise is only for practice purpose.
    • We will learn more about CSS layout, including flexbox and grid in following classes.

Exercise: ex08-2.html

  • Create ex08-2.html. Text and image can be found in GitHub (resource/templates)
  • In ex08-2.html, add code below
    <table>
  <tr> 
    <td colspan="3">The Truth About Elephants</td>
  </tr>
  <tr>
    <td colspan="2"><img src="images/elephant.jpg"></td>
    <td rowspan="3">Why is it so easy ...</td>
  </tr>
  <tr>
    <td colspan="2">A baby elephant hanging out with ...</td>
  </tr>
  <tr>
    <td>It's hard to tell...</td>
    <td>Today in the newspaper...</td>
  </tr>
</table>

Add External CSS

  • Inside WebTech/styles (or WebTech/css) folder, create a new file, ex08-2.css
  • In <head> section, add
    <link rel="stylesheet" href="styles/ex08-2.css" />
  • For table:
    • set width of the table to 500px;
    • set the right and left margins to auto;
    • set the font to Arial;
  • For tr and td:
    • set border to 1px solid black
    • set paddings to 3px
    • align with the top of cell using vertical-align: top;

Add More Styles

  • Let me challenge you:
    • Set the cell with the image to be 70% wide;
    • Set the last column to be 30%;
    • Set the cell with the "caption" to be 70%;
    • Set the first cell in the last row to be 35%;
    • Set the second cell to be 35%;
    • Set the background for the page using any image or any color;
    • You can also set the background for the table;
  • Save all files and view in web browser(s)
  • Update sitemap.html and commit/push to GitHub.

Challenging Exercise: ex08-3.html (Optional)

  • Create the same page as ex08-2.html without using table.
  • Tips:
    • use div
    • set float for some elements
    • set width for most elements

Questions?

global styles