Table Headings and Conditional Formatting for HTML Table

Learn techniques to align text in table headers, enhance table readability, and create dynamic, responsive designs. Perfect for web developers looking to improve table presentation and functionality.

This guide addresses three key tasks related to formatting and functionality in HTML tables. It includes.

Disabling Table Icons Based on Status

Demonstrates how to conditionally disable a delete icon in an HTML table row based on a status value using C# in a .NET Core application. The approach uses dynamic HTML generation to apply a disabled class and modify the onclick behavior based on the status.

To conditionally disable the delete icon based on the status in your HTML code using C#, you need to modify the HTML string based on the status value. Here’s how you can achieve this:

C# Code Example

// Assuming 'status' is a variable holding the value of the Status field
string status = "Blocked"; // Replace with your actual status variable

// Initialize StringBuilder to construct the HTML table row
var htmlTable = new StringBuilder();

htmlTable.Append("<td class='text-center'>");
htmlTable.Append("<a id='btnEdit' class='list-icons-item text-primary-600' data-toggle='modal' data-backdrop='static' data-keyboard='false' data-target='#modal_form_horizontal' onclick='BindData(this);'>");
htmlTable.Append("<i class='icon-pencil7 mr-1'></i></a>");

// Check if status is 'Blocked'
if (status == "Blocked")
{
    htmlTable.Append("<a id='btnDel' class='list-icons-item text-danger-600 disabled' data-toggle='modal' data-target='#modal_Delete' onclick='return false;'><i class='icon-bin mr-1'></i></a>");
}
else
{
    htmlTable.Append("<a id='btnDel' class='list-icons-item text-danger-600' data-toggle='modal' data-target='#modal_Delete' onclick='BindData(this);'><i class='icon-bin mr-1'></i></a>");
}

htmlTable.Append("</td>");

Explanation

• StringBuilder: Used to build the HTML string dynamically.
• Conditional Check: If status equals "Blocked," the delete icon <a> tag is given a disabled class and the onclick attribute is set to return false; to prevent any actions.
• Default Case: If the status is not "Blocked," the delete icon behaves normally.

CSS for Disabled State

Ensure you have appropriate CSS to style the disabled state if not already defined.

.disabled {
    pointer-events: none; /* Prevents clicking */
    opacity: 0.5; /* Optional: visually indicates it's disabled */
}

This approach ensures that the delete icon is disabled when the status is "Blocked," and is functional otherwise.

Changing the Button Background Color

This shows how to update the background color of a button to the primary theme using HTML and CSS. The example highlights how to replace classes to achieve the desired color and maintain consistency with the theme.

To change the background color of the button to the primary theme, you can replace the bg-info class with bg-primary. Here’s the updated markup.

<button type="button" class="btn bg-primary btn-sm" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#modal_form_horizontal" onclick="Save();">
    <i class="icon-plus22 mr-1"></i>Add
</button>

Explanation

• bg-primary: This class sets the background color of the button to the primary theme color defined in your CSS framework (e.g., Bootstrap).
• The rest of the button properties remain unchanged.

This will apply the primary theme background color to your button.

Centering Table Headings

Provides a method for aligning table headings to the center using inline CSS and an alternative approach using a CSS class. This ensures that table headers are visually centered and enhances readability in HTML tables.

To center-align the headings in your table, you can use the text-align: center; CSS property. Here’s the updated code with the headings centered:

Updated Markup

<htmlTable.Append("<thead><tr style='background-color: green; color: white; text-align: center;'>"
    + "<th>Sr.</th>"
    + "<th>Name</th>"
    + "<th>Short Name</th>"
    + "<th>Status</th>"
    + "<th class='nosort'>Action</th>"
    + "<th style='display:none'></th>"
    + "<th style='display:none'></th>"
    + "</tr></thead>");

Explanation

• text-align center: This CSS property ensures that the text inside the <th> elements is centered.
• Inline Style: Applied directly to the <tr> tag to center all headers in the row.

Alternative Approach

If you want to use CSS classes for better organization, you can define a CSS class and apply it to the <th> elements.

<style>
    .center-text {
        text-align: center;
    }
</style>

htmlTable.Append("<thead><tr style='background-color: green; color: white;'>"
    + "<th class='center-text'>Sr.</th>"
    + "<th class='center-text'>Name</th>"
    + "<th class='center-text'>Short Name</th>"
    + "<th class='center-text'>Status</th>"
    + "<th class='center-text nosort'>Action</th>"
    + "<th style='display:none'></th>"
    + "<th style='display:none'></th>"
    + "</tr></thead>");

In this alternative approach, the .center-text class applies center alignment to all headers, making your code more maintainable and cleaner.

Disabling Button Icons Based on Status

To conditionally grey out the delete icon based on the Status value in your HTML, you need to dynamically modify the HTML string based on the Status value. Here's how you can achieve this in C#.

C# Code Example

// Assuming 'status' is a variable holding the value of the Status field
string status = "Disabled"; // Replace with your actual status variable

// Initialize StringBuilder to construct the HTML table row
var htmlTable = new StringBuilder();

htmlTable.Append("<td class='text-center'>");
htmlTable.Append("<a id='btnEdit' class='list-icons-item text-primary-600' data-toggle='modal' data-backdrop='static' data-keyboard='false' data-target='#modal_form_horizontal' onclick='BindData(this);'>");
htmlTable.Append("<i class='icon-pencil7 mr-1'></i></a>");

// Check if status is 'Disabled'
if (status == "Disabled")
{
    htmlTable.Append("<a id='btnDel' class='list-icons-item text-secondary-600' data-toggle='modal' data-target='#modal_Delete' onclick='return false;' style='pointer-events: none;'>");
    htmlTable.Append("<i class='icon-bin mr-1'></i></a>");
}
else
{
    htmlTable.Append("<a id='btnDel' class='list-icons-item text-danger-600' data-toggle='modal' data-target='#modal_Delete' onclick='BindData(this);'>");
    htmlTable.Append("<i class='icon-bin mr-1'></i></a>");
}

htmlTable.Append("</td>");

Explanation

1. Check Status
   • The if statement checks if the status is "Disabled".
2. Greying Out the Delete Icon
   • If the status is "Disabled", the delete icon <a> tag.
     • Use the class text-secondary-600 to apply a grey color.
     • Includes style='pointer-events: none;' to make it non-clickable.
     • Uses onclick='return false;' to prevent any actions if clicked.
3. Default Case
   • If the status is not "Disabled", the delete icon retains its normal appearance and functionality.

CSS Classes

Ensure you have the necessary CSS classes defined to reflect the grey color for the disabled state. For example,

.text-secondary-600 {
    color: #6c757d; /* Grey color */
    opacity: 0.6;    /* Optional: visually indicate disabled state */
}

Usage

This code dynamically generates HTML based on the status value, allowing you to conditionally format the delete icon in your table rows.

These solutions are useful for improving the visual presentation and functionality of tables in web applications across both .NET Core and Java environments.