package cwp; import java.sql.*; /** Make a simple "employees" table using DatabaseUtilities. */ public class EmployeeCreation { public static Connection createEmployees(String driver, String url, String username, String password, boolean close) { String format = "(id int, firstname varchar(32), lastname varchar(32), " + "language varchar(16), salary float)"; String[] employees = {"(1, 'Wye', 'Tukay', 'COBOL', 42500)", "(2, 'Britt', 'Tell', 'C++', 62000)", "(3, 'Max', 'Manager', 'none', 15500)", "(4, 'Polly', 'Morphic', 'Smalltalk', 51500)", "(5, 'Frank', 'Function', 'Common Lisp', 51500)", "(6, 'Justin', 'Timecompiler', 'Java', 98000)", "(7, 'Sir', 'Vlet', 'Java', 114750)", "(8, 'Jay', 'Espy', 'Java', 128500)" }; return(DatabaseUtilities.createTable(driver, url, username, password, "employees", format, employees, close)); } public static void main(String[] args) { if (args.length < 5) { printUsage(); return; } String vendorName = args[4]; int vendor = DriverUtilities.getVendor(vendorName); if (vendor == DriverUtilities.UNKNOWN) { printUsage(); return; } String driver = DriverUtilities.getDriver(vendor); String host = args[0]; String dbName = args[1]; String url = DriverUtilities.makeURL(host, dbName, vendor); String username = args[2]; String password = args[3]; createEmployees(driver, url, username, password, true); } private static void printUsage() { System.out.println("Usage: EmployeeCreation host dbName " + "username password oracle|sybase."); } }
Tag Archives: টেবিল
EmployeeTest2.java: A test case for the database utilities. Prints results formatted as an HTML table.
package cwp; import java.sql.*; /** Connect to Oracle or Sybase and print "employees" table * as an HTML table. * */ public class EmployeeTest2 { public static void main(String[] args) { if (args.length < 5) { printUsage(); return; } String vendorName = args[4]; int vendor = DriverUtilities.getVendor(vendorName); if (vendor == DriverUtilities.UNKNOWN) { printUsage(); return; } String driver = DriverUtilities.getDriver(vendor); String host = args[0]; String dbName = args[1]; String url = DriverUtilities.makeURL(host, dbName, vendor); String username = args[2]; String password = args[3]; String query = "SELECT * FROM employees"; DBResults results = DatabaseUtilities.getQueryResults(driver, url, username, password, query, true); System.out.println(results.toHTMLTable("CYAN")); } private static void printUsage() { System.out.println("Usage: EmployeeTest2 host dbName " + "username password oracle|sybase."); } }
FruitCreation.java: Creates a simple table named fruits in either an Oracle or a Sybase database.
FruitCreation.java Creates a simple table named fruits in either an Oracle or a Sybase database.
package cwp; import java.sql.*; /** Creates a simple table named "fruits" in either * an Oracle or a Sybase database. * */ public class FruitCreation { public static void main(String[] args) { if (args.length < 5) { printUsage(); return; } String vendorName = args[4]; int vendor = DriverUtilities.getVendor(vendorName); if (vendor == DriverUtilities.UNKNOWN) { printUsage(); return; } String driver = DriverUtilities.getDriver(vendor); String host = args[0]; String dbName = args[1]; String url = DriverUtilities.makeURL(host, dbName, vendor); String username = args[2]; String password = args[3]; String format = "(quarter int, " + "apples int, applesales float, " + "oranges int, orangesales float, " + "topseller varchar(16))"; String[] rows = { "(1, 32248, 3547.28, 18459, 3138.03, 'Maria')", "(2, 35009, 3850.99, 18722, 3182.74, 'Bob')", "(3, 39393, 4333.23, 18999, 3229.83, 'Joe')", "(4, 42001, 4620.11, 19333, 3286.61, 'Maria')" }; Connection connection = DatabaseUtilities.createTable(driver, url, username, password, "fruits", format, rows, false); // Test to verify table was created properly. Reuse // old connection for efficiency. DatabaseUtilities.printTable(connection, "fruits", 11, true); } private static void printUsage() { System.out.println("Usage: FruitCreation host dbName " + "username password oracle|sybase."); } }
FruitTest.java: A class that connects to either an Oracle or a Sybase database and prints out the values of predetermined columns in the “fruits” table.
# FruitTest.java A class that connects to either an Oracle or a Sybase database and prints out the values of predetermined columns in the "fruits" table. package cwp; import java.sql.*; /** A JDBC example that connects to either an Oracle or * a Sybase database and prints out the values of * predetermined columns in the "fruits" table. * */ public class FruitTest { /** Reads the hostname, database name, username, password, * and vendor identifier from the command line. It * uses the vendor identifier to determine which * driver to load and how to format the URL. The * driver, URL, username, host, and password are then * passed to the showFruitTable method. */ public static void main(String[] args) { if (args.length < 5) { printUsage(); return; } String vendorName = args[4]; int vendor = DriverUtilities.getVendor(vendorName); if (vendor == DriverUtilities.UNKNOWN) { printUsage(); return; } String driver = DriverUtilities.getDriver(vendor); String host = args[0]; String dbName = args[1]; String url = DriverUtilities.makeURL(host, dbName, vendor); String username = args[2]; String password = args[3]; showFruitTable(driver, url, username, password); } /** Get the table and print all the values. */ public static void showFruitTable(String driver, String url, String username, String password) { try { // Load database driver if not already loaded Class.forName(driver); // Establish network connection to database Connection connection = DriverManager.getConnection(url, username, password); // Look up info about the database as a whole. DatabaseMetaData dbMetaData = connection.getMetaData(); String productName = dbMetaData.getDatabaseProductName(); System.out.println("Database: " + productName); String productVersion = dbMetaData.getDatabaseProductVersion(); System.out.println("Version: " + productVersion + "\n"); System.out.println("Comparing Apples and Oranges\n" + "============================"); Statement statement = connection.createStatement(); String query = "SELECT * FROM fruits"; // Send query to database and store results ResultSet resultSet = statement.executeQuery(query); // Look up information about a particular table ResultSetMetaData resultsMetaData = resultSet.getMetaData(); int columnCount = resultsMetaData.getColumnCount(); // Column index starts at 1 (ala SQL) not 0 (ala Java). for(int i=1; i
এইচটিএমএল লেআউট (HTML Layout)
Md. Mursedul Islam Sumon
Web Designer
এইচটিএমএল লেআউট (HTML Layouts)
বিভিন্ন ওয়েবসাইটে অনেক সময়ই লক্ষ্য করা যায় যে লিখাগুলো কয়েকটি কলামে বিভক্ত করা থাকে। যেমন, ম্যাগাজিন, নিউজপেপার ইত্যাদি।
HTML এ <div> tag এর ব্যবহার করে layout design বা কলামে বিভক্ত করা যায়।
div element ব্যবহার করে প্রায় layout করা হয়, কারন div ব্যবহার করলে একে সহজেই CSS দিয়ে এর অবস্থান ও সবকিছু design করে নেয়া যায়।
নিচের উদাহরণটিতে চারটি div ব্যবহার করে কয়েকটি কলাম তৈরি করা হল-
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright © W3Schools.com
</div>
</body>
উপরোক্ত html এর CSS part টুকু নিম্নরুপ
<style> #header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style>
ফলাফলঃ
HTML5 ব্যবহার করে ওয়েবসাইট বিন্যাস
HTML5 দিয়ে খুব সুন্দরভাবে ও সহজেই একটা website এর layout তৈরি করা যায়।
HTML5 এর কিছু নতুন Tag ব্যবহার করে সহজেই website এর বিভিন্ন part আলাদা করা যায়।
header = এই tag ব্যবহার করে website এর header section কে বুঝানো হয়। |
nav = এই tag ব্যবহার করে মেনুর আইটেমগুলোর link করা হয়। |
section = এই tag ব্যবহার করে কোন document এর section বুঝানো হয়। |
article = এই tag দিয়ে একটি article বুঝানো হয়। |
aside = এই tag দিয়ে পেজ এর sidebar বুঝানো হয়। |
footer = এই tag দিয়ে পেজ এর সর্বনিম্ন অংশ বা footer part বুঝানো হয়। |
নিচের উদাহরনে <header>, <nav>, <section>, এবং <footer> ব্যবহার করে layout তৈরি করা দেখানো হল-
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer>
Copyright © W3Schools.com
</footer>
</body>
উপরোক্ত html এর CSS নিম্নে দেয়া হল-
<style> header { background-color:black; color:white; text-align:center; padding:5px; } nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } section { width:350px; float:left; padding:10px; } footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }
টেবিল ব্যবহার করে HTML বিন্যাস
Table tag ব্যবহার করে html layout তৈরি করা যায়।
<body> <table class="lamp"> <tr> <th> <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"> </th> <td> The table element was not designed to be a layout tool. </td> </tr> </table> </body>
উপরোক্ত html এর CSS নিম্নে দেয়া হল-
<style> table.lamp { width:100%; border:1px solid #d4d4d4; } table.lamp th, td { padding:10px; } table.lamp th { width:40px; } </style>
এইচটিএমএল টেবিল (HTML Table)
HTML Table
মো: আশিকুজ্জামান আশিক
রাজশাহী বিশ্ববিদ্যালয়।
HTML টেবিল ব্যবহার করে আমরা কোন web পেজে বিভিন্ন ধরনের পরিসংখ্যানমূলক ডেটা পাঠকের নিকট আকর্ষণীয় ভাবে উপস্থাপন করতে পারবো।
HTML টেবিলের উদাহরন
এই পর্যায়ে আমরা একটি HTML টেবিলের উদাহরন দেখব:
সিরিয়াল নাম্বার | নামের প্রথম অংশ | নামের শেষ অংশ | নাম্বার |
১. | আল | আমিন | ৯০ |
২. | মেহেদি | হাসান | ৮৫ |
৩. | রোজিনা | আক্তার | ৭৭ |
৪. | মাহফুজুর | রহমান | ৭৬ |
৫. | তানজিলা | আক্তার | ৬৯ |
এই টেবিলটি তৈরি করার জন্য আপনি নিচের কোডটি কপি করে আপনার ব্লগে ব্যবহার করতে পারেন।
<table style="width:100%"> <tr>
<th> সিরিয়াল নাম্বার </th> <th> নামের প্রথম অংশ </th> <th> নামের শেষ অংশ </th> <th> প্রাপ্ত নাম্বার </th> </tr> <tr> <td> ১.</td> <td> আল</td> <td> আমিন</td>
<td> ৯০</td> </tr>
<tr> <td> ২.</td> <td> মেহেদি</td> <td> হাসান</td>
<td> ৮৫</td> </tr> </table>
এইভাবে আপনি <tr> থেকে </tr> পর্যন্ত অংশ পর্য়ন্ত অংশটুকু বার বার ব্যবহার করে টেবিলের সাইজ বাড়াতে পারেন।
এবার এই টেবিলে ব্যবহৃত গুরুত্বপূর্ণ ট্যাগ এর ব্যবহার সম্পর্কে কিছু তথ্য জানি।
<table> এবং </table> ট্যাগ দ্বারা কোন টেবিলের শুরু এবং শেষ চিহ্নিত করা হয়।
<tr> এবং </tr> ট্যাগ দ্বারা কোন টেবিলে ব্যবহৃত row বা সারির শুরু এবং শেষ নির্দেশ করা হয়।
<td> এবং </td> ট্যাগ দ্বারা কোন টেবিলের row বা সারিগুলোকে ছোট ছোট সেলে বিভক্ত করা হয়।
<th> এবং </th> ট্যাগ দিয়ে কোন টেবিলের হেডিংকে চিন্হিত করা হয়। [সাধারনত এই ট্যাগ ব্যবহার করলে লেখাগুলো ‘Bold’ বা মোটা হয়ে web-পেজে দেখাবে।]
HTML টেবিলে Border ট্যাগ এর ব্যবহার
HTML টেবিলকে আকর্ষনিয় করতে আমরা অনেক সময় Border ট্যাগ ব্যবহার করে থাকি। এই ট্যাগ ব্যবহার করে টেবিলের বর্ডার প্রয়োজন অনুযায়ি মোটা এবং চিকন করে উপস্থাপন করতে পারবেন।
উদাহরন:
<table border="1" style="width:100%"> <tr> <td>হাসান</td> <td>জামিল</td> <td>৫০</td> </tr> <tr> <td>কবির</td> <td>খান</td> <td>৯১</td> </tr> </table>
এখানে “<table border="1" style="width:100%">” দ্বারা একই টেবিলের Border মোটা বা চিকন ভাবে উপস্থাপন করতে পারবেন। "1" এর মান ইচ্ছে মত পরিবর্তন করে বর্ডার পরিবর্তন করতে পারবেন।
পিএইচপি : মাইএসকিউএল টেবিল তৈরি (PHP Create MySQL Tables)
একটি ডাটাবেস টেবিল এর নিজস্ব নাম থাকে এবং এটা কলাম ও সারি নিয়ে গঠিত হয়।
MySQLi এবং PDO ব্যবহার করে একটি মাইএসকিউএল ছক (table) তৈরি করা
মাইএসকিউএল এ টেবিল তৈরি করতে CREATE TABLE স্টেটমেন্ট ব্যাবহার করা হয়।
আমরা এখন "MyGuests" নামে একটি টেবিল তৈরি করবো যার "id", "firstname", "lastname", "email" এবং "reg_date" নামে পাঁচটি কলাম থাকবে-
CREATE TABLE MyGuests ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, firstname VARCHAR(30) NOT NULL, lastname VARCHAR(30) NOT NULL, email VARCHAR(50), reg_date TIMESTAMP )
উপরের টেবিল তৈরির জন্য কিছু নির্দেশনা
ডাটা টাইপ করার পরে, প্রতিটি কলামের জন্য অন্যান্য যে ঐচ্ছিক বৈশিষ্ট্যগুলি নির্দিষ্ট করতে পারেন তা নিচে দেওয়া হল :
- NOT NULL –যে কলামকে NOT NULL করা হবে তার অবশ্যই একটা মান (value) থাকতে হবে। মান (value) না থাকলে প্রকাশ এর অনুমতি পাবে না।
- DEFAULT value – যখন কোন মান (value) গৃহীত না হয়, তখন কোন ডিফল্ট (default) মান (value) যোগ করা ।
- UNSIGNED – কলাম এ শুধুমাএ সংখ্যা ধারনের জন্য ব্যবহৃত হয়। শুধুমাএ সংরক্ষিত তথ্যের ইতিবাচক সংখ্যা এবং শূন্য সংখ্যার সীমা নিয়ন্ত্রণ করে।
- AUTO INCREMENT – মাইএসকিউএল স্বয়ংক্রিয়ভাবে মান নিয়ন্ত্রণ করে।
- PRIMARY KEY –কোন টেবিল এর সারিকে স্বতন্ত্রভাবে সনাক্ত করতে ব্যবহৃত।
যদি কোন টেবিল এ primary key কলাম থাকে (এই ক্ষেত্রে ধরলাম "id" কলামটিকে primary key করা হয়েছে) তাহলে এর মধ্যকার ডাটা এই টেবিলের সংরক্ষিত ডাটা এর মধ্যে ইউনিক হতে হবে।
নিম্নলিখিত উদাহরণ এ আমরা দেখবো পিএইচপি দ্বারা কিভাবে টেবিল তৈরি করতে হয়-
উদাহরণ (MySQLi Object-oriented)
< ?php $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDB";
// Create connection $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); }
// sql to create table $sql = "CREATE TABLE MyGuests ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, firstname VARCHAR(30) NOT NULL, lastname VARCHAR(30) NOT NULL, email VARCHAR(50), reg_date TIMESTAMP )";
if ($conn->query($sql) === TRUE) { echo "Table MyGuests created successfully"; } else { echo "Error creating table: " . $conn->error; }
$conn->close(); ?>
উদাহরণ (MySQLi Procedural)
< ?php $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDB";
// Create connection $conn = mysqli_connect($servername, $username, $password, $dbname); // Check connection if (!$conn) { die("Connection failed: " . mysqli_connect_error()); }
// sql to create table $sql = "CREATE TABLE MyGuests ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, firstname VARCHAR(30) NOT NULL, lastname VARCHAR(30) NOT NULL, email VARCHAR(50), reg_date TIMESTAMP )";
if (mysqli_query($conn, $sql)) { echo "Table MyGuests created successfully"; } else { echo "Error creating table: " . mysqli_error($conn); }
mysqli_close($conn); ?>
উদাহরণ (PDO)
<?php $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDBPDO"; try { $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password); // set the PDO error mode to exception $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // sql to create table $sql = "CREATE TABLE MyGuests ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, firstname VARCHAR(30) NOT NULL, lastname VARCHAR(30) NOT NULL, email VARCHAR(50), reg_date TIMESTAMP )"; // use exec() because no results are returned $conn->exec($sql); echo "Table MyGuests created successfully"; } catch(PDOException $e) { echo $sql . "<br>" . $e->getMessage(); } $conn = null; ?>
পিএইচপি – টেবিলে শেষ প্রবেশকৃত রেকর্ড এর আইডি বের করা (PHP Get ID of Last Inserted Record in Bangla)
auto-increment ফাংশন এর মাধ্যমে যদি আমরা টেবিলে কোন ডাটা যোগ বা পরিবর্তন করে থাকি তাহলে এর ID এর নাম্বারটি আমরা অতি দ্রুতই পেতে পারি।
Phpmyadmin এ গিয়ে "MyGuests" নামের একটি ডাটাবেস টেবিল তৈরি করি । এখানে আইডি কলাম হচ্ছে AUTO_INCREMENT ফিল্ড:
CREATE TABLE MyGuests ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, firstname VARCHAR(30) NOT NULL, lastname VARCHAR(30) NOT NULL, email VARCHAR(50), reg_date TIMESTAMP )
এবং সেভ বাটন এ ক্লিক করি। তাহলে আমাদের ডাটাবেস এবং টেবিল তৈরি হয়ে গেল।
এখন আমরা পরবর্তী পিএইচপি পেজ তৈরি করব জার মাধ্যমে আমরা ডাটা ইনপুট বা আপডেট করলে তার ID নাম্বার টা পাই।
< ?php $servername = "localhost"; /*সারভার নাম*/ $username = "username"; /*xampp server এ root ব্যবহার করা হয়*/ $password = "password"; /*xampp সারভার এ পাসওয়ার্ড ব্লাঙ্ক থাকে*/ $dbname = "myDB"; /*ডাটাবেস এর নাম*/ // Create connection $conn = new mysqli($servername, $username, $password, $dbname); /*এর মাধ্যমে ডাটাবেস এর সাথে connection তৈরি করা হোল */ // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); /*যদি connection ঠিক না থাকে তাহলে “connection failed” দেখাবে*/ }
$sql = "INSERT INTO MyGuests (firstname, lastname, email) VALUES ('John', 'Doe', 'john@example.com')"; /*ডাটাবেস টেবিল এর মধ্যে একটি ডাটা যোগ করা হোল*/
if ($conn->query($sql) === TRUE) /*একটি শর্ত দিয়ে দেয়া হোল যদি SQL QUERY টা ঠিক মত হয়ে থাকে তাহলে নিচের মতন হবে*/ { $last_id = $conn->insert_id; echo "New record created successfully. Last inserted ID is: " . $last_id; /*আমাদের একটি ID auto-increment সেট করে দেওয়া হয়েছিল এই লাইন এর মাধ্যমে আমরা সেই ID টা দেখতে পারব*/ } else { /*যদি আমাদের ডাটাবেসের সাথে query তে ভুল থাকে তাহলে সে এরর দেখাবে মানে কোন ডাটা অ্যাড হয় নি */ echo "Error: " . $sql . "<br>" . $conn->error; }
$conn->close(); /*এই কোড এর মাধ্যমে আমরা ডাটাবেস এর connection বন্ধ করে দিব */ ?>
নোটপ্যাড ওপেন করে এই example টুকু টাইপ করে ফাইল টি সেভ করুন php_mysql_insert_lastid.php দিয়ে। আপনার ফাইল টি localhost > htdocs> test ফোল্ডার এর ভিতর রাখুন। ব্রাউজার ওপেন করে এড্রেস বারে লিখুন localhost/test/ php_mysql_insert_lastid.php . Go বাটন এ ক্লিক করলে একটি ফলাফল আপনি খুজে পাবেন। আপনি যে ID এর মাধ্যমে ডাটা অ্যাড করেছেন সেই ID নাম্বার টা ডিসপ্লে হবে।
বুটস্ট্র্যাপ টেবিল (Bootstrap Tables)
Bootstrap বেসিক টেবিল
সাধারণত Bootstrap বেসিক টেবিলে light padding বা সামান্য প্যাডিং ও horizontal বা আনুভূমিক divider থাকে। এক্ষেত্রে divider বলতে Row এর bottom-border কে বোঝানো হয়েছে।
.table
class ব্যবহার করে টেবিলের basic styling করা হয়। যেমন:
কোড :
<div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div>
উল্লেখ্য : এই অনুচ্ছেদের সকল উদাহরণের ক্ষেত্রে বা সকল বুটস্ট্র্যাপ কোড নিয়ে কাজ করার সময় অবশ্যই হেড সেকশনে নিম্নোক্ত কোড টাইপ করতে হবে :
<head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/ bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script> </head>
Striped Rows
.table-striped
class ব্যবহার করে টেবিলে zebra-stripes যোগ করা হয়। যেমন:
কোড:
<div class="container"> <table class="table table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div>
Bordered Table
.table-bordered
class ব্যবহার করে টেবিলের ও সেলের চারদিকে বর্ডার যোগ করা হয়। যেমন:
কোড :
<div class="container"> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div>
Hover Rows
টেবিলের row বা সারিতে hover ইফেক্ট দেবার জন্য .table-hover
class টি যোগ করা হয়। যেমন:
কোড :
<div class="container"> <table class="table table-hover"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div>
Condensed Table
.table-condensed
class টি ব্যবহার করলে টেবিলের সেল সাধারণ প্যাডিং অর্ধেক পরিমাণে কমে যায়। যেমন:
কোড :
<div class="container"> <table class="table table-condensed"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div>
Contextual Classes
সাধারণত কোনো টেবিলের rows (<tr>
) কিংবা cells (<td>
) এ color দেবার জন্য Contextual Classes ব্যবহার করা হয়। যেমন:
কোড :
<div class="container"> <table class="table table-condensed"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div>
Contextual Class গুলো সাধারণত নির্দিষ্ট কিছু color কে নির্দেশ করে। যেসকল Contextual Class ব্যবহৃত হয় সেগুলো হলো:
.active |
কোনো টেবিলের row বা টেবিলের cell এর জন্য hover color এর জন্য ব্যবহৃত হয়। |
.success |
সফল (successful ) বা ইতিবাচক (positive) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়। |
.info |
নিরপেক্ষ বা তথ্যপূর্ণ (neutral informative) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়। |
.warning |
মনোযোগ আকর্ষণ করার জন্য বা সতর্কতামূলক (warning) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়। |
.danger |
বিপদজনক বা নেতিবাচক (dangerous or potentially negative) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়। |