Scribd
Upload
13 views

HTML Tables

Uploaded by

seannfuentes
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
13 views

HTML Tables

Uploaded by

seannfuentes
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/ 4

I What is

new?
Information Sheet 7.6
HTML TABLES
HTML tables allow web developers to arrange data into rows and columns.
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.
The <td> elements are the data containers of the table. They can contain all
sorts of HTML elements; text, images, lists, other tables, etc.
Example Code: Expected Output on the Browser

Table Parts
1
Page

TVL – Computer Programming (G11) Edison e. Feranil


HTML Table - Add a Border
To add a border to a table, use the CSS border property:

HTML Table - Collapsed Borders


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

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:

HTML Table - Cell that Span Many Columns


To make a cell span more than one column, use the colspan attribute:
Example:

2
Page

TVL – Computer Programming (G11) Edison e. Feranil


Output on the Browser of Column Span:

HTML Table - Cell that Span Many Rows


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

Output on the browser of Row Span:


3
Page

TVL – Computer Programming (G11) Edison e. Feranil


Graphical Comparison between colspan and rowspan in HTML Tables:

HTML Table - Add a Caption


To add a caption to a table, use the <caption> tag. The <caption> tag must
be inserted immediately after the <table> tag.
Example:

This is tha caption of the table

4
Page

TVL – Computer Programming (G11) Edison e. Feranil

You might also like