<p>Should I still be using tables anyway?</p>

<p>The table code I'd be replacing is:</p>

<pre><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;td&gt;Name&lt;/td&gt;&lt;td&gt;Value&lt;/td&gt;
    &lt;/tr&gt;
    ...
&lt;/table&gt;
</code></pre>

<p>From what I've been reading I should have something like</p>

<pre><code>&lt;label class="name"&gt;Name&lt;/label&gt;&lt;label class="value"&gt;Value&lt;/value&gt;&lt;br /&gt;
...
</code></pre>

<p>Ideas and links to online samples greatly appreciated.  I'm a developer way out of my design depth.</p>

<p>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.</p>

[{'answer_id': 61360, 'author': 'Espo', 'author_id': 2257, 'author_profile': 'https://Stackoverflow.com/users/2257', 'pm_score': 3, 'selected': False, 'text': '<p>I think tables are best used for tabular data, which it seems you have there.</p>\n\n<p>If you do not want to use tables, the best thing would be to use definition lists(<code>&lt;dl&gt; and &lt;dt&gt;</code>). Here is how to style them to look like your old <code>&lt;td&gt;</code> layout.\n<a href="http://maxdesign.com.au/articles/definition/" rel="nofollow noreferrer">http://maxdesign.com.au/articles/definition/</a></p>\n'}, {'answer_id': 61362, 'author': 'macbirdie', 'author_id': 5049, 'author_profile': 'https://Stackoverflow.com/users/5049', 'pm_score': 7, 'selected': True, 'text': '<p>I think that definition lists are pretty close semantically to name/value pairs.</p>\n\n<pre><code>&lt;dl&gt;\n    &lt;dt&gt;Name&lt;/dt&gt;\n    &lt;dd&gt;Value&lt;/dd&gt;\n&lt;/dl&gt;\n</code></pre>\n\n<p><a href="http://www.maxdesign.com.au/presentation/definition" rel="noreferrer">Definition lists - misused or misunderstood?</a></p>\n'}, {'answer_id': 61364, 'author': 'Fire Lancer', 'author_id': 6266, 'author_profile': 'https://Stackoverflow.com/users/6266', 'pm_score': -1, 'selected': False, 'text': '<p>use the float: property eg:\ncss:</p>\n\n<pre class="lang-css prettyprint-override"><code>.left {\n  float:left;\n  padding-right:20px\n}\n</code></pre>\n\n<p>html:</p>\n\n<pre><code>&lt;div class="left"&gt;\n Name&lt;br/&gt;\n AnotherName\n&lt;/div&gt;\n&lt;div&gt;\n Value&lt;br /&gt;\n AnotherValue\n&lt;/div&gt;\n</code></pre>\n'}, {'answer_id': 61379, 'author': 'erlando', 'author_id': 4192, 'author_profile': 'https://Stackoverflow.com/users/4192', 'pm_score': 3, 'selected': False, 'text': "<p>It's perfectly reasonable to use tables for what seems to be tabular data.</p>\n"}, {'answer_id': 61381, 'author': 'Allain Lalonde', 'author_id': 2443, 'author_profile': 'https://Stackoverflow.com/users/2443', 'pm_score': 2, 'selected': False, 'text': '<p>If I\'m writing a form I usually use this:</p>\n\n<pre><code>&lt;form ... class="editing"&gt;\n    &lt;div class="field"&gt;\n        &lt;label&gt;Label&lt;/label&gt;\n        &lt;span class="edit"&gt;&lt;input type="text" value="Value" ... /&gt;&lt;/span&gt;\n        &lt;span class="view"&gt;Value&lt;/span&gt;\n    &lt;/div&gt;\n    ...\n&lt;/form&gt;\n</code></pre>\n\n<p>Then in my css:</p>\n\n<pre><code>.editing .view, .viewing .edit { display: none }\n.editing .edit, .editing .view { display: inline }\n</code></pre>\n\n<p>Then with a little JavaScript I can swap the class of the form from editing to viewing.</p>\n\n<p>I mention this approach since you wanted to display and edit the data with nearly the same layout and this is a way of doing it.</p>\n'}, {'answer_id': 62679, 'author': 'derek lawless', 'author_id': 400464, 'author_profile': 'https://Stackoverflow.com/users/400464', 'pm_score': 2, 'selected': False, 'text': '<p>Like macbirdie I\'d be inclined to mark data like this up as a definition list unless the content of the existing table could be judged to actually <em>be</em> tabular content. </p>\n\n<p>I\'d avoid using the label tag in the way you propose. Take a look at explanation of the label tag @ <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label</a> - it\'s really intended to allow you to focus on its associated control. Also avoid using generic divs and spans as from a semantic point of view they\'re weak.</p>\n\n<p>If you\'re display multiple name-value pairs on one screen, but editing only one on an edit screen, I\'d use a table on the former screen, and a definition list on the latter.</p>\n'}, {'answer_id': 39487947, 'author': 'Dónal', 'author_id': 2648, 'author_profile': 'https://Stackoverflow.com/users/2648', 'pm_score': 3, 'selected': False, 'text': '<p>Horizontal definition lists work pretty well, i.e.</p>\n<pre class="lang-html prettyprint-override"><code>&lt;dl class=&quot;dl-horizontal&quot;&gt;\n  &lt;dt&gt;ID&lt;/dt&gt;\n  &lt;dd&gt;25&lt;/dd&gt;\n  &lt;dt&gt;Username&lt;/dt&gt;\n  &lt;dd&gt;Bob&lt;/dd&gt;\n&lt;/dl&gt;\n</code></pre>\n<p>The <code>dl-horizontal</code> class is provided by the Bootstrap CSS framework.</p>\n<p>From Bootstrap4:</p>\n<pre class="lang-html prettyprint-override"><code>&lt;dl class=&quot;row&quot;&gt;\n  &lt;dt class=&quot;col&quot;&gt;ID&lt;/dt&gt;\n  &lt;dd class=&quot;col&quot;&gt;25&lt;/dd&gt;\n&lt;/dl&gt;\n&lt;dl class=&quot;row&quot;&gt;\n  &lt;dt class=&quot;col&quot;&gt;Username&lt;/dt&gt;\n  &lt;dd class=&quot;col&quot;&gt;Bob&lt;/dd&gt;\n&lt;/dl&gt;\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/61357', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1122/']