HTML Tables

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default.

Example:   Try It

 
      <table>  
		<tr>
			<td>Name</td>
			<td>Class</td>
			<td>Marks</td>
		</tr>  
		<tr>
			<td>Raghav</td>
			<td>8th</td>
			<td>590</td>
		</tr>  
		<tr>
			<td>Sri Rama</td>
			<td>10th</td>
			<td>580</td>
		</tr>  
      </table>

Table Heading

Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by default.

Example:   Try It

     <table>
         <tr>
            <th>Name</th>
            <th>Salary</th>
         </tr>
         <tr>
            <td>Ramesh Raman</td>
            <td>5000</td>
         </tr>
         <tr>
            <td>Shabbir Hussein</td>
            <td>7000</td>
         </tr>
      </table>

Table Borders Try It

To specify table borders in CSS, use the border property.

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

Table Border collapse Try It

Borders around the table and their cells are collapsed by useing the border-collapse property.

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

Table with Caption Try It

We can add a caption (or title) for tables using the </caption> element. The </caption> element must be placed directly after the opening

    <caption>Students Marks</caption>

Spanning Multiple Rows and Columns Try It

We can extend table rows and columns across multiple other rows and columns using rowspan and colspan attributes.

    <th colspan="2">Phone</th>

Practice exercise:

1.Write an html code to display the web page as follows. View

Sri Hari Book Store

Mission

"Sriharibookstore.com is committed to bringing the most convenient, easy and secure shopping experience on the web."

Latest Books

2.Write an html code to display the web page as follows. View

Sri Ramanuja e-Patashala

New Media and Web Design

Sri Ramanuja Media Design will bring your company’s Web presence to the next level. We offer a comprehensive range of services.

New Courses