Twitter Bootstrap Tutorial :: Part 4
In this tutorial we describe how to use table using twitter bootstrap. From line number 1034 to 1167 of bootstrap.css of twitter bootstrap version2.0 contains css for table.
There are different kinds of styles are available on bootstrap.css for table. If you want to use those styles just call the default class from bootstrap.css. such as( table, table-stripped, table-condensed etc. ).
Just have a look on practical example.
Code ::
[sourcecode]</pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css" />
<title>Table Tutorial</title>
</head>
<body>
<div class="container">
<table class="table table-striped">
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>01</td>
<td>Sam</td>
<td>Australia</td>
</tr>
<tr>
<td>02</td>
<td>David</td>
<td>England</td>
</tr>
<tr>
<td>03</td>
<td>Rabindra</td>
<td>India</td>
</tr>
</table>
</div>
</body>
</html>
<pre>[/sourcecode]
Output ::
Now if you want to use table border you can add another class table-borderd.
Code ::
[sourcecode]</pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css" />
<title>Table Tutorial</title>
</head>
<body>
<div class="container">
<table class="table table-striped table-bordered">
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>01</td>
<td>Sam</td>
<td>Australia</td>
</tr>
<tr>
<td>02</td>
<td>David</td>
<td>England</td>
</tr>
<tr>
<td>03</td>
<td>Rabindra</td>
<td>India</td>
</tr>
</table>
</div>
</body>
</html>
<pre>[/sourcecode]
Output ::
Now you can try yourself how to use table using twitter bootstrap. We think this article will help you to use twitter bootstrap tables. We will discuss more about twitter bootstrap in our next tutorial .
Thank You
Step into the future with CyberNetikz, where we craft tomorrow’s tech innovations with today’s coding artistry Mega Medusa Casino.