Should I still be using tables anyway?
The table code I'd be replacing is:
<table> <tr> <td>Name</td><td>Value</td> </tr> ... </table>
From what I've been reading I should have something like
<label class="name">Name</label><label class="value">Value</value><br /> ...
Ideas and links to online samples greatly appreciated. I'm a developer way out of my design depth.
EDIT: My need is to be able to both to display the data to a user and edit the values in a separate (but near identical) form.
Name-value pairs are represented by a set of text strings in which name="value" are usually separated by commas, semicolons, space or newline character.
A property and value pair is called a declaration, and any CSS engine calculates which declarations apply to every single element of a page in order to appropriately lay it out, and to style it. Both properties and values are case-insensitive by default in CSS.
A name–value pair, also called an attribute–value pair, key–value pair, or field–value pair, is a fundamental data representation in computing systems and applications. Designers often desire an open-ended data structure that allows for future extension without modifying existing code or data.
I think that definition lists are pretty close semantically to name/value pairs.
<dl> <dt>Name</dt> <dd>Value</dd> </dl>
Definition lists - misused or misunderstood?
Horizontal definition lists work pretty well, i.e.
<dl class="dl-horizontal"> <dt>ID</dt> <dd>25</dd> <dt>Username</dt> <dd>Bob</dd> </dl>
The dl-horizontal
class is provided by the Bootstrap CSS framework.
From Bootstrap4:
<dl class="row"> <dt class="col">ID</dt> <dd class="col">25</dd> </dl> <dl class="row"> <dt class="col">Username</dt> <dd class="col">Bob</dd> </dl>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With