Tuesday, 10 December 2024

Home / bootstrap / Lecture Notes Of Class 13: Tables

Lecture Notes Of Class 13: Tables

by on in

Lecture Notes Of  Class 13: Tables

Topic: Bootstrap Table Styling and Responsive Tables

Objective:

In this class, we will learn how to create and style tables using Bootstrap, a popular CSS framework. We'll cover the following topics:

  • Styling tables with hover, striped, and bordered rows.
  • Making tables responsive to different screen sizes.

Introduction to Bootstrap Tables

Bootstrap provides a set of predefined styles that help you quickly build tables with various layouts. By adding specific classes to your HTML table elements, you can make them more visually appealing and adaptable.

Here are the most common table styling options in Bootstrap:

  • Hoverable: Rows change color when hovered over.
  • Striped: Alternates row colors for better readability.
  • Bordered: Adds borders around the table and cells.
  • Responsive: Ensures that the table adjusts to the screen size.

Basic Table Structure

Before diving into the styling, let’s first look at the basic structure of a table in HTML:

html
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>Smith</td>
      <td>@janesmith</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob</td>
      <td>Johnson</td>
      <td>@bobjohnson</td>
    </tr>
  </tbody>
</table>
  • <thead>: Contains the header row with column titles.
  • <tbody>: Contains the body of the table with the actual data rows.
  • <th>: Table header cell, usually bold.
  • <td>: Table data cell.

1. Bootstrap Table Styling

To apply styling to the table, you need to add Bootstrap classes directly in the <table> element. The most common ones are:

  • .table: This class applies basic styling to the table, such as padding, borders, and background colors.
  • .table-hover: Adds a hover effect on table rows.
  • .table-striped: Creates alternating colored rows to make the table easier to read.
  • .table-bordered: Adds borders around every cell in the table.

Example: Basic Table with Styling

html
<table class="table table-hover table-striped table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane</td>
      <td>Smith</td>
      <td>@janesmith</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bob</td>
      <td>Johnson</td>
      <td>@bobjohnson</td>
    </tr>
  </tbody>
</table>
  • .table-hover will change the background color of a row when you hover over it.
  • .table-striped will alternate row colors, making it easier to read the data.
  • .table-bordered will put borders around every cell.

2. Making the Table Responsive

Sometimes, tables can have many columns or large data, which might not fit on small screens. To make sure the table is readable on all devices, you can make the table responsive by wrapping the table inside a div with the class .table-responsive.

Example: Making the Table Responsive

html
<div class="table-responsive">
  <table class="table table-hover table-striped table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John</td>
        <td>Doe</td>
        <td>@johndoe</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane</td>
        <td>Smith</td>
        <td>@janesmith</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Bob</td>
        <td>Johnson</td>
        <td>@bobjohnson</td>
      </tr>
    </tbody>
  </table>
</div>
  • The .table-responsive class makes the table scrollable horizontally on small screens. This way, users can swipe to view the full content of the table instead of breaking the layout.

3. Lab Tasks

Task 1: Create a Table with Hover, Striped, and Bordered Rows

Objective: Create a table that:

  • Has hover effects on rows.
  • Alternates row colors with a striped design.
  • Has borders around each cell.
html
<table class="table table-hover table-striped table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Product</th>
      <th>Category</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Apple</td>
      <td>Fruit</td>
      <td>$1.00</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Carrot</td>
      <td>Vegetable</td>
      <td>$0.50</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Banana</td>
      <td>Fruit</td>
      <td>$0.80</td>
    </tr>
  </tbody>
</table>

Task 2: Make the Table Responsive

Objective: Wrap the table in a div with the class .table-responsive to make it scrollable on small screens.

html
<div class="table-responsive">
  <table class="table table-hover table-striped table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Product</th>
        <th>Category</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Apple</td>
        <td>Fruit</td>
        <td>$1.00</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Carrot</td>
        <td>Vegetable</td>
        <td>$0.50</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Banana</td>
        <td>Fruit</td>
        <td>$0.80</td>
      </tr>
    </tbody>
  </table>
</div>

By adding the table-responsive class, the table will adjust to the screen size, and users can scroll horizontally if the table doesn't fit.

Conclusion

Today, we've learned how to:

  • Apply basic Bootstrap table styling using the table, table-hover, table-striped, and table-bordered classes.
  • Make tables responsive using the table-responsive class.

These techniques will help you create user-friendly, visually appealing tables that are adaptable to different screen sizes, especially on mobile devices. Practice by modifying the table content and experimenting with different Bootstrap classes.

Homework/Practice:

1.   Create a table that displays employee information (ID, Name, Department, Salary) with hover, striped, and bordered effects.

2.   Add a responsive feature to the table so it adjusts when viewed on smaller screens.

You said:

WRITE 10 ASSIGNMENTS FROM ABOVE CONCEPT WITH STEP BY STEP SOLUTIONS with proper explanation

ChatGPT said:

ChatGPT

Here are 10 assignments based on the concept of Bootstrap Table Styling and Responsive Tables, along with step-by-step solutions and explanations:

Assignment 1: Basic Bootstrap Table

Task: Create a simple table with Bootstrap styling that displays a list of books. Apply the .table class for basic table styling.

Solution:

1.   Open a new HTML file and add the basic structure.

2.   Add a table element and apply the table class.

3.   Define the thead and tbody sections with column headers and rows.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Table</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Book Title</th>
        <th>Author</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>JavaScript: The Good Parts</td>
        <td>Douglas Crockford</td>
        <td>$25.00</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Clean Code</td>
        <td>Robert C. Martin</td>
        <td>$30.00</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Design Patterns</td>
        <td>Erich Gamma</td>
        <td>$35.00</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Assignment 2: Adding Hover Effect to Table Rows

Task: Modify the previous table by adding the table-hover class to make the rows change color when hovered over.

Solution:

1.   In the table element, add the table-hover class.

2.   Hover over a row to see the effect.

html
<table class="table table-hover">
  <!-- Table content remains the same as above -->
</table>

Assignment 3: Striped Table Rows

Task: Modify the table to alternate row colors by adding the table-striped class.

Solution:

1.   Add the table-striped class to the table element.

html
<table class="table table-hover table-striped">
  <!-- Table content remains the same as above -->
</table>

Assignment 4: Adding Borders to the Table

Task: Apply borders to the table by adding the table-bordered class to the table.

Solution:

1.   Add the table-bordered class to the table element.

html
<table class="table table-hover table-striped table-bordered">
  <!-- Table content remains the same as above -->
</table>

Assignment 5: Responsive Table

Task: Make the table responsive so that it scrolls horizontally on small screens.

Solution:

1.   Wrap the table inside a div with the table-responsive class.

html
<div class="table-responsive">
  <table class="table table-hover table-striped table-bordered">
    <!-- Table content remains the same as above -->
  </table>
</div>

Assignment 6: Customizing the Table for a Student List

Task: Create a student list table with columns: ID, Name, Age, and Grade. Apply the table-bordered, table-hover, and table-striped classes.

Solution:

1.   Add a table with the relevant columns and classes.

html
<table class="table table-bordered table-hover table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>18</td>
      <td>A</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td>19</td>
      <td>B+</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mark Lee</td>
      <td>20</td>
      <td>B</td>
    </tr>
  </tbody>
</table>

Assignment 7: Table with Nested Data

Task: Create a table showing products with a nested list of features for each product. Use Bootstrap table styles.

Solution:

1.   Create a table with product names, prices, and a nested list of features.

2.   Apply table-bordered and table-hover classes.

html
<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Features</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Phone</td>
      <td>$699</td>
      <td>
        <ul>
          <li>5G Connectivity</li>
          <li>108MP Camera</li>
          <li>4000mAh Battery</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>Laptop</td>
      <td>$1200</td>
      <td>
        <ul>
          <li>Intel i7 Processor</li>
          <li>16GB RAM</li>
          <li>512GB SSD</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

Assignment 8: Table with Colspan and Rowspan

Task: Create a table with merged cells using colspan and rowspan. Apply the table-bordered class.

Solution:

1.   Use colspan and rowspan attributes for merged cells.

html
<table class="table table-bordered">
  <thead>
    <tr>
      <th rowspan="2">ID</th>
      <th colspan="2">Product</th>
      <th rowspan="2">Price</th>
    </tr>
    <tr>
      <th>Name</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Phone</td>
      <td>Electronics</td>
      <td>$699</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Laptop</td>
      <td>Computers</td>
      <td>$1200</td>
    </tr>
  </tbody>
</table>

Assignment 9: Table with Search Functionality

Task: Create a table with product information and add a search box at the top to filter products by name. Use Bootstrap for styling.

Solution:

1.   Add a search input above the table.

2.   Use JavaScript to filter the table rows based on the search query.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Searchable Table</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <script>
    function searchTable() {
      const input = document.getElementById("searchInput").value.toLowerCase();
      const rows = document.querySelectorAll("table tbody tr");
      
      rows.forEach(row => {
        const cells = row.getElementsByTagName("td");
        const product = cells[1].textContent.toLowerCase();
        row.style.display = product.includes(input) ? "" : "none";
      });
    }
  </script>
</head>
<body>
  <input type="text" id="searchInput" class="form-control mb-3" placeholder="Search for product" onkeyup="searchTable()">
  
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>ID</th>
        <th>Product</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Phone</td>
        <td>$699</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Laptop</td>
        <td>$1200</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Assignment 10: Creating a Multi-Page Table with Pagination

Task: Create a table with a large number of rows and implement pagination for navigating through the table pages.

Solution:

1.   Use Bootstrap's pagination component.

2.   Divide the table data into multiple pages and display the current page.

html
<table class="table table-bordered">
  <!-- Table content (same as other tables) -->
</table>
 
<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

These assignments help practice various Bootstrap table concepts, including styling, responsiveness, interactivity, and customization, providing a good foundation for working with tables in Bootstrap.

You said:

WRITE 50 no of MCQs only FROM ABOVE CONCEPT with explanation

ChatGPT said:

ChatGPT

Here are 50 multiple-choice questions (MCQs) based on the concept of Bootstrap Table Styling and Responsive Tables, along with explanations for each answer.

1. What Bootstrap class is used to add borders to a table?

  • A) table-hover
  • B) table-bordered
  • C) table-responsive
  • D) table-striped

Answer: B) table-bordered
Explanation: The table-bordered class adds borders around the table and its cells.

2. Which class in Bootstrap is used to make a table responsive?

  • A) table-responsive
  • B) table-striped
  • C) table-bordered
  • D) table-hover

Answer: A) table-responsive
Explanation: The table-responsive class makes a table horizontally scrollable on small screens, ensuring that it fits within the viewport.

3. Which class would you use to create alternating row colors in a table?

  • A) table-hover
  • B) table-striped
  • C) table-bordered
  • D) table-active

Answer: B) table-striped
Explanation: The table-striped class adds alternating colors to rows in the table.

4. What does the table-hover class do in Bootstrap?

  • A) Adds a hover effect on the table header.
  • B) Changes the background color of the entire table on hover.
  • C) Adds hover effects on table rows.
  • D) Changes the font of the table on hover.

Answer: C) Adds hover effects on table rows.
Explanation: The table-hover class applies a background color change to rows when hovered over.

5. How can you merge two or more table columns in Bootstrap?

  • A) Use the colspan attribute
  • B) Use the rowspan attribute
  • C) Use the table-merge class
  • D) Use table-columns

Answer: A) Use the colspan attribute
Explanation: The colspan attribute in the <th> or <td> tags is used to merge multiple columns.

6. What is the correct HTML tag to create a table header in Bootstrap?

  • A) <thead>
  • B) <header>
  • C) <th>
  • D) <table-header>

Answer: A) <thead>
Explanation: The <thead> tag defines the header section of a table in HTML.

7. To make a table scrollable horizontally on smaller devices, you need to wrap the table in a ________.

  • A) div with the table-scrollable class
  • B) div with the table-responsive class
  • C) div with the table-fixed class
  • D) table-wrapper

Answer: B) div with the table-responsive class
Explanation: Wrapping a table in a div with the table-responsive class enables horizontal scrolling on small screens.

8. Which Bootstrap class can be used to highlight a row in a table when it is clicked?

  • A) table-active
  • B) table-hover
  • C) table-highlight
  • D) table-selected

Answer: A) table-active
Explanation: The table-active class is used to highlight the current or selected row in a table.

9. Which attribute is used to merge table rows in Bootstrap?

  • A) colspan
  • B) rowspan
  • C) cellmerge
  • D) span

Answer: B) rowspan
Explanation: The rowspan attribute is used to merge multiple rows into one cell.

10. In a Bootstrap table, which class is used to add alternating row colors and hover effects together?

  • A) table-striped
  • B) table-hover
  • C) table-striped table-hover
  • D) table-bordered

Answer: C) table-striped table-hover
Explanation: Combining table-striped and table-hover adds both alternating row colors and hover effects.

11. What class is used in Bootstrap to add a light background to a table row when it is hovered?

  • A) table-light
  • B) table-active
  • C) table-hover
  • D) table-dark

Answer: C) table-hover
Explanation: The table-hover class highlights the row with a light background when hovered.

12. Which Bootstrap class is used to create a table with bordered rows?

  • A) table-hover
  • B) table-bordered
  • C) table-striped
  • D) table-responsive

Answer: B) table-bordered
Explanation: The table-bordered class adds borders around each table cell.

13. What is the purpose of the table-striped class in Bootstrap?

  • A) It removes the borders from a table.
  • B) It adds a dark background to alternate rows.
  • C) It changes the font of the table cells.
  • D) It alternates row colors with a light background.

Answer: D) It alternates row colors with a light background.
Explanation: The table-striped class applies alternating light and dark background colors to rows.

14. Which of the following will make a table fully responsive on small devices?

  • A) table-responsive
  • B) table-fluid
  • C) table-collapse
  • D) table-container

Answer: A) table-responsive
Explanation: The table-responsive class enables horizontal scrolling on small screens, making the table fully responsive.

15. How can you specify a column span in a table header in Bootstrap?

  • A) colspan="2"
  • B) rowspan="2"
  • C) table-colspan="2"
  • D) table-span="2"

Answer: A) colspan="2"
Explanation: The colspan attribute specifies how many columns a header cell should span.

16. Which class in Bootstrap can be used to remove the borders from a table?

  • A) table-borderless
  • B) table-no-border
  • C) table-noborders
  • D) table-clear

Answer: A) table-borderless
Explanation: The table-borderless class removes all borders from the table.

17. Which class would you use to make a table cell active in Bootstrap?

  • A) table-active
  • B) table-hover
  • C) table-selected
  • D) table-marked

Answer: A) table-active
Explanation: The table-active class highlights the active row or cell.

18. To make a table responsive, which HTML element should wrap the table?

  • A) <section>
  • B) <div>
  • C) <span>
  • D) <footer>

Answer: B) <div>
Explanation: The table should be wrapped in a <div> element with the table-responsive class to make it scroll horizontally on small screens.

19. What is the correct syntax to add a hover effect on table rows in Bootstrap?

  • A) <table class="table-hover">
  • B) <table class="table-striped">
  • C) <table class="table-bordered">
  • D) <table class="table-responsive">

Answer: A) <table class="table-hover">
Explanation: The table-hover class adds hover effects to table rows.

20. Which class should be added to a table in Bootstrap to create an alternative background color for rows?

  • A) table-striped
  • B) table-hover
  • C) table-bordered
  • D) table-light

Answer: A) table-striped
Explanation: The table-striped class alternates the background colors of table rows.

21. In Bootstrap, which table class is used for making the table scrollable horizontally on smaller devices?

  • A) table-scrollable
  • B) table-responsive
  • C) table-scroll
  • D) table-auto

Answer: B) table-responsive
Explanation: The table-responsive class ensures the table is horizontally scrollable on small devices.

22. What attribute in a table is used to specify how many rows a cell should span?

  • A) colspan
  • B) rowspan
  • C) span
  • D) cellspan

Answer: B) rowspan
Explanation: The rowspan attribute is used to specify how many rows a cell should span.

23. Which of the following classes is used to give the table a striped appearance?

  • A) table-stripe
  • B) table-striped
  • C) table-light
  • D) table-borderless

Answer: B) table-striped
Explanation: The table-striped class applies a striped background to the table rows.

24. How can you make sure a table only displays on larger devices, like desktops, using Bootstrap?

  • A) d-none d-lg-block
  • B) d-block d-sm-none
  • C) d-lg-none
  • D) d-sm-block

Answer: A) d-none d-lg-block
Explanation: The d-none d-lg-block class ensures that the table is hidden on small screens and displayed on large devices.

25. What is the effect of the table-hover class in Bootstrap?

  • A) It adds a shadow effect to the table.
  • B) It adds hover effects to table cells.
  • C) It adds borders to table rows.
  • D) It adds alternating row colors.

Answer: B) It adds hover effects to table cells.
Explanation: The table-hover class adds hover effects that highlight the row when the user hovers over it.

26. How do you apply a responsive table layout in Bootstrap?

  • A) Add table-responsive class to the table.
  • B) Add table-layout: auto in the CSS.
  • C) Use table-responsive class on a container element.
  • D) Apply max-width to the table.

Answer: A) Add table-responsive class to the table.
Explanation: Applying table-responsive to a table will make it scrollable on smaller screens.

27. Which Bootstrap class would you use to make a table borderless?

  • A) table-fluid
  • B) table-borderless
  • C) table-no-borders
  • D) table-rounded

Answer: B) table-borderless
Explanation: The table-borderless class removes the table's borders.

28. In Bootstrap, what is the default background color applied to active rows when using table-active?

  • A) Light gray
  • B) Dark gray
  • C) Blue
  • D) Green

Answer: A) Light gray
Explanation: The table-active class applies a light gray background color to the active row.

29. What class would you use to add a responsive table without overflow?

  • A) table-scroll
  • B) table-responsive
  • C) table-collapse
  • D) table-resize

Answer: B) table-responsive
Explanation: table-responsive makes the table scrollable horizontally on smaller screens.

30. What does the table-bordered class do in Bootstrap?

  • A) Adds space between table cells.
  • B) Adds borders around table cells.
  • C) Makes the table scrollable.
  • D) Alternates row colors.

Answer: B) Adds borders around table cells.
Explanation: The table-bordered class adds borders around every table cell.

31. Which Bootstrap table class removes the striped effect from the table?

  • A) table-no-stripes
  • B) table-bordered
  • C) table-no-border
  • D) table-striped

Answer: D) table-striped
Explanation: The table-striped class applies alternating row colors. Removing it removes the striped effect.

32. Which of these classes ensures that the table will occupy the full width of its container?

  • A) table-auto
  • B) table-fluid
  • C) table-full
  • D) table-responsive

Answer: A) table-auto
Explanation: The table-auto class ensures that the table width adjusts automatically to its content.

33. How would you make a table cell take up two rows?

  • A) Use colspan="2"
  • B) Use rowspan="2"
  • C) Use span="2"
  • D) Use columnspan="2"

Answer: B) Use rowspan="2"
Explanation: The rowspan="2" attribute allows a table cell to span across two rows.

34. In Bootstrap, which class would you use to align a table to the center of the page?

  • A) text-center
  • B) table-center
  • C) mx-auto
  • D) align-table-center

Answer: C) mx-auto
Explanation: The mx-auto class centers the table horizontally within its container.

35. What is the correct way to define a table row in HTML?

  • A) <row>
  • B) <tr>
  • C) <td>
  • D) <th>

Answer: B) <tr>
Explanation: The <tr> tag is used to define a table row in HTML.

36. Which class in Bootstrap adds a dark background color to the table?

  • A) table-dark
  • B) table-darkmode
  • C) table-black
  • D) table-bg-dark

Answer: A) table-dark
Explanation: The table-dark class adds a dark background to the table.

37. What is the use of the col element in a table in HTML?

  • A) It defines a column header.
  • B) It defines a column within a table.
  • C) It spans multiple columns.
  • D) It merges table rows.

Answer: B) It defines a column within a table.
Explanation: The <col> element defines a column in an HTML table and allows applying styles to the entire column.

38. What will happen if you don't use the table-responsive class on small devices?

  • A) The table will shrink to fit the screen width.
  • B) The table will overflow out of the container.
  • C) The table will be hidden.
  • D) The table will be automatically stacked.

Answer: B) The table will overflow out of the container.
Explanation: Without the table-responsive class, the table will not adjust to smaller screen sizes and might overflow outside the container.

39. Which class is used to make a table responsive without horizontal scroll?

  • A) table-fluid
  • B) table-wrap
  • C) table-overflow
  • D) table-responsive

Answer: D) table-responsive
Explanation: The table-responsive class ensures that a table adjusts to smaller screen sizes without overflowing.

40. What class is used in Bootstrap to make a table contain compact padding between cells?

  • A) table-condensed
  • B) table-tight
  • C) table-sm
  • D) table-bordered

Answer: A) table-condensed
Explanation: The table-condensed class reduces the padding within the table cells.

41. Which of these classes is used to apply a striped effect and hover effect simultaneously on a Bootstrap table?

  • A) table-hover table-striped
  • B) table-bordered
  • C) table-condensed
  • D) table-responsive

Answer: A) table-hover table-striped
Explanation: The combination of table-hover and table-striped adds both hover effects and alternating row colors.

42. Which of the following is NOT a class related to table styling in Bootstrap?

  • A) table-bordered
  • B) table-striped
  • C) table-outline
  • D) table-responsive

Answer: C) table-outline
Explanation: table-outline is not a Bootstrap table class. The correct classes are table-bordered, table-striped, and table-responsive.

43. What is the purpose of using the table-bordered class in Bootstrap?

  • A) To display the table in a bordered layout.
  • B) To apply a background color to table headers.
  • C) To make the table scrollable.
  • D) To display table text in bold.

Answer: A) To display the table in a bordered layout.
Explanation: The table-bordered class adds borders around each table cell, creating a bordered layout.

44. How would you center-align a table header in Bootstrap?

  • A) Use text-center class on <th>
  • B) Use align-center class on <th>
  • C) Use table-center class
  • D) Use center-align class on <thead>

Answer: A) Use text-center class on <th>
Explanation: The text-center class can be used on <th> tags to center-align the table header text.

45. How would you style a table row with a bold font using Bootstrap?

  • A) Add font-bold class to the row.
  • B) Add fw-bold class to the row.
  • C) Add table-bold class to the row.
  • D) Use inline CSS for font-weight.

Answer: B) Add fw-bold class to the row.
Explanation: The fw-bold class in Bootstrap applies a bold font weight to the row.

46. Which Bootstrap class is used to set a dark background for a table?

  • A) table-dark
  • B) table-light
  • C) table-primary
  • D) table-darkmode

Answer: A) table-dark
Explanation: The table-dark class is used to set a dark background color to the entire table.

47. In which scenario should you use the table-responsive class in Bootstrap?

  • A) When you want a table to be centered horizontally on the page.
  • B) When you want to make sure the table is scrollable on smaller devices.
  • C) When you want to apply alternating row colors.
  • D) When you want to make the table background dark.

Answer: B) When you want to make sure the table is scrollable on smaller devices.
Explanation: The table-responsive class ensures that a table is horizontally scrollable on smaller devices.

48. Which class is used in Bootstrap to add alternating row colors to a table?

  • A) table-striped
  • B) table-hover
  • C) table-condensed
  • D) table-bordered

Answer: A) table-striped
Explanation: The table-striped class adds alternating row colors to the table, enhancing its readability.

49. Which class in Bootstrap adds a background color to the table row on hover?

  • A) table-active
  • B) table-hover
  • C) table-primary
  • D) table-danger

Answer: B) table-hover
Explanation: The table-hover class highlights the row with a background color when the user hovers over it.

50. How do you define a table header in HTML?

  • A) <th>
  • B) <thead>
  • C) <td>
  • D) <header>

Answer: A) <th>

Explanation: The <th> tag is used to define a table header in HTML. 

By at
Tags

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Search This Blog
Powered by Blogger.