HTML Tables

Next Page Previous Page

Table Attributes:

  1. <table>: it is the outermost layer for our box.
  2. <tr>: tr defines the table rows
  3. <td>: td defines table data in each cell.
  4. <th>: this is known as table heading 
  5. <caption>: caption here is table caption.
  6. border: the border is a CSS property that can be used in the table.
  7. Border-collapse: it is also a CSS property for table cell borders.
  8. Padding: padding is a CSS property for cell padding.
  9. Text-align: text-align is a CSS property to align our table text.
  10. Border-spacing: CSS property that specifies the spaces between cells.
  11. colspan : makes columns inside a cell.
  12. rowspan: makes rows inside cells.
  13. Id: unique id for the table.

Let’s see an example of a simple table:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Tables </title>
	</head>
	<body>
		<table style="width:100%">
		  <tr>
			<th>Our Heading 1</th>
			<th>Our Heading 2</th>
			<th>Our Heading 3</th>
		  </tr>
		  <tr>
			<td>A1</td>
			<td>B2</td>
			<td>C3</td>
		  </tr>
		  <tr>
			<td>D1</td>
			<td>E2</td>
			<td>F3</td>
		  </tr>
		</table>
	</body>
</html>

Caption : 

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Tables </title>
	</head>
	<body>
		<table style="width:100%">
		  <caption>Let's use caption</caption>

		  <tr>
			<th>Our Heading 1</th>
			<th>Our Heading 2</th>
			<th>Our Heading 3</th>
		  </tr>
		  <tr>
			<td>A1</td>
			<td>B2</td>
			<td>C3</td>
		  </tr>
		  <tr>
			<td>D1</td>
			<td>E2</td>
			<td>F3</td>
		  </tr>
		</table>
	</body>
</html>

Border :

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Tables </title>
		<style>
		table, th, td {
		border: 1px solid black;
		}
		</style>
	</head>
	<body>
		<table style="width:100%">
		  <caption>Let's use caption</caption>

		  <tr>
			<th>Our Heading 1</th>
			<th>Our Heading 2</th>
			<th>Our Heading 3</th>
		  </tr>
		  <tr>
			<td>A1</td>
			<td>B2</td>
			<td>C3</td>
		  </tr>
		  <tr>
			<td>D1</td>
			<td>E2</td>
			<td>F3</td>
		  </tr>
		</table>
	</body>
</html>

Collapsed-border:

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Tables </title>
		<style>
		table, th, td {
		  border: 1px solid black;
		  border-collapse: collapse;
		}
		</style>
	</head>
	<body>
		<table style="width:100%">
		  <caption>Let's use caption</caption>

		  <tr>
			<th>Our Heading 1</th>
			<th>Our Heading 2</th>
			<th>Our Heading 3</th>
		  </tr>
		  <tr>
			<td>A1</td>
			<td>B2</td>
			<td>C3</td>
		  </tr>
		  <tr>
			<td>D1</td>
			<td>E2</td>
			<td>F3</td>
		  </tr>
		</table>
	</body>
</html>

Cell-Padding :

<!DOCTYPE html>
<html>
	<head>
		<title>HTML Tables </title>
		<style>
		table, th, td {
		  border: 1px solid black;
		  border-collapse: collapse;
		  padding: 15px;

		}
		</style>
	</head>
	<body>
		<table style="width:100%">
		  <caption>Let's use caption</caption>

		  <tr>
			<th>Our Heading 1</th>
			<th>Our Heading 2</th>
			<th>Our Heading 3</th>
		  </tr>
		  <tr>
			<td>A1</td>
			<td>B2</td>
			<td>C3</td>
		  </tr>
		  <tr>
			<td>D1</td>
			<td>E2</td>
			<td>F3</td>
		  </tr>
		</table>
	</body>
</html>

 

Next Page Previous Page

Treding Tutorial

Popular Tutorials

to Learn now