While many argue in favor of CSS positioning over table-based layouts, I am curious about the extent of CSS's capabilities compared to tables. Can CSS achieve all the same layouts as tables, or are there some designs that are either impossible or impractical with CSS?
When it comes to CSS, handling tabular data can be tricky. The table tag is still the best option for presenting structured data in rows and columns. Trying to mimic tables using CSS can result in overly complex code that is hard to maintain.
It's important to recognize that tabular data extends beyond just numerical values in a traditional table format. Forms and other interactive content can also be considered tabular if their fields naturally organize themselves into rows and columns. The key question to ask yourself is whether you would visually represent your data as rows and columns on a page, regardless of computer influence.
If given the opportunity, I would transition to css-based layouts. While the arguments for semantic structure are valid, practical considerations come into play as well. Here are some reasons why tables can be beneficial:
Although there are CSS display properties like table-cell that attempt to replicate this functionality, their compatibility across browsers may still be an issue (unless user browser settings can be controlled).
For the website I manage, varying column widths in layouts must be accommodated dynamically. Multiple clients utilize the same site templates, introducing uncertainty regarding content placement within menus, headers, and cells. By employing a single outer table for structuring the main site sections, I can maintain flexibility without concerns about menu width affecting content positioning or background color coverage.
In my ideal scenario, <table> tags would strictly correspond to tabular data while a separate set of tags, perhaps labeled <layout>, would handle layout arrangements with row and cell components. Alternatively, incorporating a 'mode' attribute in the <table> tag—featuring values for 'data' and 'layout'—could signal to screen readers and search engines how to interpret the content. Perhaps such enhancements could emerge in HTML 6...
Edit: Regarding the issue of 'float wrap,' a recent question on Stack Overflow presents a somewhat effective solution here. Although it might seem complex, this approach could address the problem in various scenarios.
Tables are designed for organizing tabular data, not for structural layout. In my opinion, using tables as a shortcut is a common mistake, as I have always found CSS to be more than capable of solving any design challenge.
While it may seem easier to use tables for vertical alignment and full height columns, these tasks can also be accomplished with the power of CSS.
After some experimentation, I discovered an interesting technique that CSS alone cannot achieve, but tables can. Just yesterday, I posed a question about this topic and received a helpful response.
If you have two elements that you want to appear on the same line, regardless of their widths, using a table is necessary. Even if the elements are inline or floated, if they dynamically resize and exceed the container's width, they will wrap onto the next line instead of overflowing. To ensure that they remain on the same line, even if one element overflows the container, they must be contained within table cells.
Upon further investigation, I found that this issue only arises when dealing with floats. For elements displayed inline or as inline-blocks, setting white-space: nowrap on the container should suffice. However, in my experience, there may still be unexpected spacing between elements, particularly in Firefox, which was problematic for my specific needs.
Are ugly ones?
Definitely not.
While tables can make form fields look neat, they heavily impact accessibility and semantic structure of web pages. Achieving the same visual results with CSS may require more effort, but it's worth it for a better user experience.
Applying CSS for the same purpose may not always yield as refined results.
Tables play a crucial role in showcasing structured data (specifically, NOT for layouts). They represent logical and semantic elements that should be utilized accordingly. Tables encompass components like columns and rows which cannot be fully emulated using CSS alone.
Are tables still relevant in web design?
Some argue that tables are outdated and unnecessary due to CSS positioning capabilities, but others believe they still have a place in certain scenarios.
<DebatingTablesVsCSSPositioning />
save your precious time
Utilizing tables in the markup alleviates the need to worry about intricate positioning or cross-browser compatibility issues. Tables generally function consistently across different browsers, streamlining the design process.
Hey there! I'm trying to figure out how to recreate the image attached using CSS3. I've tried a few online tools for generating gradients, but no luck so far. :( I have the original image, but I really want to create the background using CSS3 in ...
Within my navigation div, there exists another div called login. Through the use of JavaScript, I have implemented a functionality that reveals additional divs such as login_name_field, login_pw_field, register_btn, do_login_btn, and hide_login upon clicki ...
Is there a way to change the display of a content div to block when a specific tab is selected by the user, while hiding all other content divs? Here is the JQuery code I have tried so far: $(document).ready(function() { function resetTabs() { $("# ...
Is there a method to achieve a floating label effect in Bootstrap 4 even after removing the "required" attribute from the input field? $(document).ready(function() { $('.form-group input').on('focus', function() { $(this).sibli ...
I'm trying to add a navigation arrow on my website that will rotate to point to the top when it reaches the footer. When clicked on, it should scroll back up to the top. The arrow already has a scrolling effect, but I need help figuring out how to m ...
I am struggling to load a CSS file in the header of my Handlebars (HSB) template for home. My backend is built using Node.js with Express. I suspect that I may have set the path incorrectly, but I'm unable to pinpoint the exact issue. Could someone p ...
The bootstrap margin is causing issues with this code <div class="row"> <div class="row1 col-lg-3"> <div class="row2 col-lg-1"></div> <div class="row2 col-lg-1"></di ...
Apologies if this question seems trivial, but I am completely new to coding in HTML and JavaScript. I understand that I can make some changes based on scroll position, but right now I'm a little confused. I want to increase the height of a box as the ...
My latest project involved creating a quiz program using only PHP. The program consists of 4 different questions and radio buttons, and when an option is selected, the value of the radio button (A, B, C, or D) should be printed. I have set up 4 PHP varia ...
I initially used express and the render function to display different pages on my website. However, I've now decided to switch to vanilla JavaScript instead. The objective is to load the HTML file along with all the necessary JS and CSS files. Below i ...
I'm currently using Selenium in an attempt to click on the "show more" option under the "about this show" section on the following URL: https://www.bandsintown.com/e/1024477910-hot-8-brass-band-at-the-howlin'-wolf?came_from=253&utm_medium=we ...
My attempt to add an autofill feature to my text field has been unsuccessful. The autocomplete attribute seems to be undefined, and I am hesitant to use a form action to solve this issue. Additionally, I have included the easy-autocomplete.min.css file, ...
I am looking to design a product list page with a mouseover gallery similar to the one showcased on [this page][1]. I attempted to use a vertical carousel like the one illustrated in this Fiddle, but unfortunately, it does not function like Zalando and jc ...
Currently deep into front end design work, I found myself experimenting with Chrome developer tools. However, to my surprise, a specific style persisted on the webpage even after multiple reloads and cache clearings. This mystery style seems to have a mind ...
While using Bootstrap 2 modal, I encountered an issue with the close button not being placed correctly in IE7. Given the popularity of this CSS library, I am curious if anyone has found a solution to align it properly in IE7. It seems to be related to floa ...
I'm looking to achieve a specific functionality that involves opening multiple bootstrap modal popups on one page simultaneously without overlapping each other. Specifically, I need a button to trigger the opening of five separate modals each containi ...
When I open this image in Safari, this is what I see: https://i.stack.imgur.com/KbyGP.png However, this is the code I have: https://i.stack.imgur.com/4wEf0.png References: How to Remove WebKit's Banana-Yellow Autofill Background Remove forced ye ...
Can I keep the options visible when a user selects an item in the 'select' dropdown? I want to add more options to the 'select' when the user clicks on the 'op2' item, without closing the list of options. <select> <o ...
Seems like a straightforward problem, it reminds me of this issue discussed on Stack Overflow but in relation to Vue instead of Angular. I am facing an issue where the CSS styling I'm trying to apply to my Flickity carousel is not being rendered corre ...
Greetings! As indicated by the title, I am on a quest to create categories with subcategories. Despite my efforts scouring through Stack Overflow for assistance, none of the examples provided have proven helpful. Allow me to provide a visual representatio ...