2

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">

4
  • 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ý
    Commented Apr 16, 2011 at 21:43
  • @mzabsky: good point. fixed.
    – mpen
    Commented Apr 16, 2011 at 21:55
  • It depends if you want to serialise objects, does .Net favour attribute or element based serialisation? ;)
    – Phil Helix
    Commented Apr 17, 2011 at 1:29
  • @Carnotaurus: Eh? Not concerned about serialization. Why does it matter what .net favors?
    – mpen
    Commented Apr 17, 2011 at 4:53

1 Answer 1

Reset to default
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>
1
  • 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 <row> then if you're in the last col, output a </row> and then make sure everything's properly closed at the end. Without the <rows> 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 <rows> around.
    – mpen
    Commented Apr 30, 2011 at 19:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.