BDWS-Task3: HTML Table, Divs and Spans + Clickable Image SUMMARY

HTML Table:

In order to display value in rows and columns, HTML deliver the <table> tags for creating a table. <table> & </table>.

To create table rows we use: <tr> and </tr>.

Inside table row <tr>, we add content to the cell by tag table data <td>: <td> </td>, along with creating a table data, HTML creating a single column of the row.

The more table data created inside table row, the more columns generated.

Like HTML structure, Table should be created in 2 parts: Table Head and Table Body:

Table Head: stored information of table (Displaying in the top of table). <thead> </thead>. Creating rows with <tr> and a data cell with <th> </th> tags.

Table Body: Contained actual data. <tbody> </tbody>.

For creating a bigger cell than others, we use column span attribute: colspan = “number of columns”. It will expand the width of cell to the specified NUMBER of COLUMN.

For styling table, HTML use styling attribute as usual: font-size, font-family, color….

HTML Div ( Separating Division ):

In order to creating some Parts of page, HTML provide Division Separating tags: <div> </div>.

We can linking it, imaging it, styling it by specified attributes above.

HTML Span:

Span tags provide us a tool for styling specific parts of page, of table, of paragraph … for multi targets.

We use span with style attribute for designing page as we need.

HTML Table with Clickable Photo:

Beside file.html created, HTML use a stylesheet.css file to store a formatting elements of html file, means CSS.

Table cell is not only the place stored text data but also the clickable Photos.

Inside table data tag (<td>), we are able to add image with photo tags: <img>.

Along with table photo, it’s possible to put a hyper link to photo with <a> </a> tags along with href attribute.