Let's consider an example where I want to create a form that looks like this:
https://i.sstatic.net/kBLtL.png
Now, the question arises - should I use the <table> tag for this job, or is it a better approach to utilize <div> along with CSS?
I understand the general rule that CSS is used for styling while tables are meant for tabular data. However, since the form is not exactly tabular, it seems logical to style it using CSS to align the form elements. On the other hand, tables come with specific tags (td, tr, tbody, thead, etc), and if I opt for divs instead, they may blend in with other divs. For example, when a div is used for a container and another div for a form, it might become confusing and require extra scrutiny to differentiate between them, unlike tables which provide a clear structure.
I am interested in knowing the current best practices for developing and styling forms.
Note: While the forms may not necessarily have to be aligned exactly as shown, I struggle to think of another practical way to present them. Also, envision having 5 or 6 such forms placed next to each other, rather than just one.