Scribd
Upload
75 views

Computer 10 Q4 Week 1

The document discusses how to create and style HTML tables using various table tags like <table>, <tr>, <th>, and <td> as well as CSS properties to control things like borders, padding, alignment, captions and styling individual tables with IDs. It provides examples of how to make cells span multiple columns or rows and explains how to add borders, padding, captions and other styling to HTML tables. The activity at the end asks the reader to write HTML code for the sample table on a separate sheet of paper.

Uploaded by

BIT INTERNATIONAL COLLEGE TALIBON
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
75 views

Computer 10 Q4 Week 1

The document discusses how to create and style HTML tables using various table tags like <table>, <tr>, <th>, and <td> as well as CSS properties to control things like borders, padding, alignment, captions and styling individual tables with IDs. It provides examples of how to make cells span multiple columns or rows and explains how to add borders, padding, captions and other styling to HTML tables. The activity at the end asks the reader to write HTML code for the sample table on a separate sheet of paper.

Uploaded by

BIT INTERNATIONAL COLLEGE TALIBON
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

COMPUTER 10

FOURTH QUARTER
WEEK 1

HTML TABLES
HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table


The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each
table data/cell is defined with a <td> tag.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.


Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables,
etc.

HTML Table - Add a Border


To add a border to a table, use the CSS border property:

Example
table, th, td {
  border: 1px solid black;
}

Remember to define borders for both the table and the table cells.

HTML Table - Collapsed Borders


To let the borders collapse into one border, add the CSS border-
collapse property:

Example
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
HTML Table - Add Cell Padding
Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without
padding.

To set the padding, use the CSS padding property:

Example
th, td {
  padding: 15px;
}

HTML Table - Left-align Headings


By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example
th {
  text-align: left;
}

HTML Table - Add Border Spacing


Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example
table {
  border-spacing: 5px;
}

Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table - Cell that Spans Many Columns


To make a cell span more than one column, use the colspan attribute:
Example
<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

HTML Table - Cell that Spans Many Rows


To make a cell span more than one row, use the rowspan attribute:

Example
<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

HTML Table - Add a Caption


To add a caption to a table, use the <caption> tag:

Example
<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Note: The <caption> tag must be inserted immediately after the <table> tag.

A Special Style for One Table


To define a special style for one particular table, add an id attribute to the
table:

Example
<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Now you can define a special style for this table:


#t01 {
  width: 100%;
  background-color: #f1f1c1;
}

And add more styles:


#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}
ACTIVITY:

1. WRITE AN HTML CODE OF THIS TABLE ON A SEPARATE


SHEET OF PAPER.

You might also like