codescracker


css

CSS Tables



« Previous Tutorial Next Tutorial »


Using the TABLE element, you can create table in a Web page. Apart from creating a new table, the TABLE element allows you to add content in rows and columns of an existing table.

Many times, you may also require to present table in different layout and formats to make it more attractive or visually appealing on a Web page.

You can customize the appearance and layout of a table using Cascading Style Sheet (CSS) in HTML.

CSS provides various properties, such as table-layout, border-collapse, and caption-side, which helps you to perform various tasks, such as aligning the table content, customizing the border of the table, and changing the position of the table caption.

You will learn about various table properties of CSS in detail divided into the following tutorials:

Table Borders

You are free to create borders around the table using CSS to make table looks more interactive.

CSS Table Border Example

Here is an example, shows how to set border around the table using CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Table Border Example</title>
	<style>
		table, th, td { border:2px solid red; }
	</style>
</head>
<body>

<table>
	<tr>
		<th>Tutorial</th>
		<th>Example</th>
	</tr>
	<tr>
		<td>CSS Table Tutorial</td>
		<td>CSS Table Example</td>
	</tr>
	<tr>
		<td>CSS Table Border Tutorial</td>
		<td>CSS Table Border Example</td>
	</tr>
</table>

</body>
</html>

Here is the sample output produced by the above CSS table border example code:

css table border

CSS Table Width and Height

You can set height and width of the table or table elements using CSS. Here is an example shows how to set width and height of the table using CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Table Width and Height Example</title>
	<style>
		table, th, td { border:2px solid red; }
		table { width:100%; }
		th { height:50px; }
	</style>
</head>
<body>

<table>
	<tr>
		<th>Tutorial</th>
		<th>Example</th>
	</tr>
	<tr>
		<td>CSS Table Tutorial</td>
		<td>CSS Table Example</td>
	</tr>
	<tr>
		<td>CSS Table Width Height Tutorial</td>
		<td>CSS Table Width Height Example</td>
	</tr>
</table>

</body>
</html>

Here is the sample output of the above CSS table width and height example code:

CSS Table Width Height

CSS Table Horizontal Text Alignment

Here is an example shows how to align the table text horizontally using CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Table Horizontal Text Alignment Example</title>
	<style>
		table, th, td { border:2px solid red; }
		table { width:100%; }
		th { text-align:left; }
	</style>
</head>
<body>

<table>
	<tr>
		<th>Tutorial</th>
		<th>Example</th>
	</tr>
	<tr>
		<td>CSS Table Tutorial</td>
		<td>CSS Table Example</td>
	</tr>
	<tr>
		<td>CSS Table Horizontal Text Alignment Tutorial</td>
		<td>CSS Table Horizontal Text Alignment Example</td>
	</tr>
</table>

</body>
</html>

Following is the output of the above CSS table horizontal text alignment example code:

css table heading alignment

CSS Table Vertical Text Alignment

You can also align table text vertically using CSS. Here is an example shows how to align the table text vertically using CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Table Vertical Text Alignment Example</title>
	<style>
		table, th, td { border:2px solid red; }
		table { width:100%; }
		td { height:50px; vertical-align:bottom; }
	</style>
</head>
<body>

<table>
	<tr>
		<th>Tutorial</th>
		<th>Example</th>
	</tr>
	<tr>
		<td>CSS Table Tutorial</td>
		<td>CSS Table Example</td>
	</tr>
	<tr>
		<td>CSS Table Vertical Text Alignment Tutorial</td>
		<td>CSS Table Vertical Text Alignment Example</td>
	</tr>
</table>

</body>
</html>

Below is the sample output produced by the above CSS table vertical text alignment example code:

css table vertical alignment

CSS Table Padding

You can also create padding around the table using CSS. Here is an example shows how to set padding around the table elements using CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Table Padding Example</title>
	<style>
		table, th, td { border:2px solid red; }
		td, th { padding:15px; }
	</style>
</head>
<body>

<table>
	<tr>
		<th>Tutorial</th>
		<th>Example</th>
	</tr>
	<tr>
		<td>CSS Table Tutorial</td>
		<td>CSS Table Example</td>
	</tr>
	<tr>
		<td>CSS Table Padding Tutorial</td>
		<td>CSS Table Padding Example</td>
	</tr>
</table>

</body>
</html>

The above CSS table padding example code will produce the following output:

table padding

CSS Table Color

You can set color of the table using CSS. Here is an example shows how to set color for the table using CSS:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Table Color Example</title>
	<style>
		table, th, td { border:2px solid red; }
		td, th { padding:15px; }
		th { background-color:black; color:white; }
		td { background-color:green; color:white; }
	</style>
</head>
<body>

<table>
	<tr>
		<th>Tutorial</th>
		<th>Example</th>
	</tr>
	<tr>
		<td>CSS Table Tutorial</td>
		<td>CSS Table Example</td>
	</tr>
	<tr>
		<td>CSS Table Color Tutorial</td>
		<td>CSS Table Color Example</td>
	</tr>
</table>

</body>
</html>

Here is the sample output of this CSS table color example code:

css table color

CSS Table Caption

Below is an example to understand the table caption in CSS. In this example, the caption positioned at bottom of the table:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Table Caption Example</title>
	<style>
		table, th, td { border:2px solid red; }
		td, th { padding:15px; }
		th { background-color:black; color:white; }
		td { background-color:green; color:white; }
		caption { caption-side:bottom; }
	</style>
</head>
<body>

<table>
<caption>CSS Table Tutorial and Example</caption>
	<tr>
		<th>Tutorial</th>
		<th>Example</th>
	</tr>
	<tr>
		<td>CSS Table Tutorial</td>
		<td>CSS Table Example</td>
	</tr>
	<tr>
		<td>CSS Table Caption Tutorial</td>
		<td>CSS Table Caption Example</td>
	</tr>
</table>

</body>
</html>

Here is the output produced by the above CSS table caption example code:

css table caption side

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test