Ideal way to define a table or grid in XML?

Question

HTML

<table border="1" width="400">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="28" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Content="Name:"/>
    <Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/>
    <Label Grid.Row="2" Grid.Column="0" Content="Comment:"/>
    <TextBox Grid.Column="1" Grid.Row="0" Margin="3" />
    <TextBox Grid.Column="1" Grid.Row="1" Margin="3" />
    <TextBox Grid.Column="1" Grid.Row="2" Margin="3" />
    <Button Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" 
            MinWidth="80" Margin="3" Content="Send"  />
</Grid>

In HTML, there's some ambiguity on how you set the width of a column. You have to specify it on the th/td, but there are multiple of those within the same column.

WPF solves this problem by introducing "definitions", but then you have to explicitly specify which cell you want to insert each element in to, adding a lot of extra markup. Also, what happens if you miss a cell, or try to put two elements into the same cell?

What about something like this?

<grid>
    <coldefs>
        <coldef width="150" />
        <coldef width="100" />
    </coldefs>
    <rowdefs>
        <rowdef height="50" />
        <remainingrowdef height="auto" />
    </rowdef>

    <cell>Month</cell>
    <cell>Savings</cell>
    <cell>January</cell>
    <cell>$100</cell>
    <cell>February</cell>
    <cell>$80</cell>
</grid>

Where the cells just fill left to right, top to bottom? Pros/cons? Other options?

Better yet, you can specify the fill order too! Just add an extra argument <grid fill_order="left-right,top-bottom">

I think it would make more sense to label the XAML example XAML (since it applies to both WPF and Silverlight). But nice question, I will watch this. — Matěj Zábský, Apr 16 '11 at 21:43
It depends if you want to serialise objects, does .Net favour attribute or element based serialisation? ;) — Phil C, Apr 17 '11 at 01:29
@Carnotaurus: Eh? Not concerned about serialization. Why does it matter what .net favors? — mpen, Apr 17 '11 at 04:53

score 2 · Answer 1 · answered Apr 30 '11 at 12:01

2

I think a good table definition should fit very well with XSLT, so you can derive your HTML and XAML examples easily. Your proposal looks good, maybe this would be easier to transform:

<grid>
    <coldefs>
        <coldef width="150" />
        <coldef width="100" />
    </coldefs>
    <rowdef height="auto" />

    <row height="50">
        <cell>Month</cell>
        <cell>Savings</cell>
    </row>
    <row>
        <cell>January</cell>
        <cell>$100</cell>
    </row>
    <row>
        <cell>February</cell>
        <cell>$80</cell>
    </row>
</grid>

answered Apr 30 '11 at 12:01

Christoph Walesch

123
5

Looks easier to read, but it's harder to output when you're in a loop. You always have to check if you're in the first col, then output a `` then if you're in the last col, output a `` and then make sure everything's properly closed at the end. Without the `` you wouldn't have to worry about any of that. Also, if you have a grid of images for example, and you wanted to add one more col, you'd just have to add one more coldef rather than having to try and shuffle all the `` around. – mpen Apr 30 '11 at 19:39

Ideal way to define a table or grid in XML?

HTML

XAML

1 Answers1