Since the editable figures belong to the same context as the non-editable data and should be comparable with them, they should have the same basic layout. This is not just about right alignment.
If you use the input
element for editable data, this will have many implications on rendering: different font family, different font size, nonzero padding or margin, a border around, a fixed width (typically suitable for 20 digits), and maybe something else. There are various ways around this, like setting several CSS properties on input
in order to make it similar to normal text, or putting the non-editable data to input
elements, too, just with the readonly
attribute.
If you use normal text content instead, just with the contenteditable
attribute, it becomes much simpler to make editable and non-editable data similar, just with some controlled way of highlighting the latter. On the other hand, submitting data as part of form data will take more work then. But this does not matter if you are really doing all the processing in a browser and do not submit the form at all.
Then there’s the question how to make it evident to the user which data is editable. Using just white background is not sufficient especially if you have alternating colors for rows with non-editable data, as in your example. Using the outline
property, to draw a colored outline around the item, is one possibility; outline
differs from border
by not affecting the layout of the page at all – the outline is like an extra layer set over basic content. But some (very) old browsers do not support outline
. (And you should probably make the color of the outline different for an element that has focus.)
Then there is the issue of accessibility. Should this work even when CSS is disabled, and when used with assistive software like screen readers? Then the clumsy way of using input
for editable data is certainly the most robust.
So there are quite a few parameters in the situation that need to be considered before an informed decision can be made.