Table Layout

1)

One basic example to better understanding :

<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:shrinkColumns="*" android:stretchColumns="*"
android:background="#ffffff">
 <!-- Row 1 with single column -->
<TableRow
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp" android:text="Row
1" android:layout_span="3"
android:padding="18dip" android:background="#b0b0b0"
android:textColor="#000"/>

</TableRow>

<!-- Row 2 with 3 columns -->

<TableRow
android:id="@+id/tableRow1"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView
android:id="@+id/TextView04" android:text="Row 2 column 1"
android:layout_weight="1" android:background="#dcdcdc"
android:textColor="#000000"
android:padding="20dip" android:gravity="center"/>
<TextView
android:id="@+id/TextView04" android:text="Row 2 column 2"
android:layout_weight="1" android:background="#d3d3d3"
android:textColor="#000000"
android:padding="20dip" android:gravity="center"/>
<TextView
android:id="@+id/TextView04" android:text="Row 2 column 3"
android:layout_weight="1" android:background="#cac9c9"
android:textColor="#000000"
android:padding="20dip" android:gravity="center"/>
</TableRow>

<!-- Row 3 with 2 columns -->

<TableRow
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center_horizontal">
<TextView
android:id="@+id/TextView04" android:text="Row 3 column 1"
android:layout_weight="1 android:background="#b0b0b0"
android:textColor="#000000"
 android:padding="18dip" android:gravity="center"/>

<TextView
android:id="@+id/TextView04" android:text="Row 3 column 2"
android:layout_weight="1" android:background="#a09f9f"
android:textColor="#000000"
android:padding="18dip" android:gravity="center"/>
</TableRow>

</TableLayout>

2)Taking example to create a login screen for better

understanding.

activity_table_layout_android_example.xml :

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<TableRow android:paddingTop="10px" android:gravity="center">

<TextView
android:id="@+id/status"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_span="2"
android:text="LOGIN"
android:textColor="#890000"
android:textSize="15sp"
android:textStyle="bold" />

</TableRow>

<TableRow android:layout_marginTop="20dip" >

<TextView
android:layout_width="wrap_content"
android:text="Username :"
 android:textSize="20sp"
android:textColor="#000000"
android:layout_marginLeft="20dip"
></TextView>

<EditText
android:id="@+id/screenName"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:layout_weight="1" >

</EditText>

</TableRow>

<TableRow android:layout_marginTop="20dip" >

<TextView android:text="Password :"

android:layout_width="wrap_content"
android:textSize="20sp"
android:textColor="#000000"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip"></TextView>

<EditText
android:id="@+id/password"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:layout_weight="1" >

</EditText>

</TableRow>

<TableRow android:gravity="center" android:layout_marginTop="20dip" >

<Button
android:text="Submit"
android:clickable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/save" android:layout_span="2" ></Button>
</TableRow>

</TableLayout>
3)
<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/tableLayout1"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

<!-- 2 columns -->

<TableRow

android:id="@+id/tableRow1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="5dip" >

<TextView

android:id="@+id/textView1"

android:text="Column 1"

android:textAppearance="?android:attr/textAppearanceLarge" />

<Button

android:id="@+id/button1"

android:text="Column 2" />

</TableRow>
<!-- edittext span 2 column -->

<TableRow

android:id="@+id/tableRow2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="5dip" >

<EditText

android:id="@+id/editText1"

android:layout_span="2"

android:text="Column 1 & 2" />

</TableRow>

<!-- just draw a red line -->

<View

android:layout_height="2dip"

android:background="#FF0000" />

<!-- 3 columns -->

<TableRow

android:id="@+id/tableRow3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"
 android:padding="5dip" >

<TextView

android:id="@+id/textView2"

android:text="Column 1"

android:textAppearance="?android:attr/textAppearanceLarge" />

<Button

android:id="@+id/button2"

android:text="Column 2" />

<Button

android:id="@+id/button3"

android:text="Column 3" />

</TableRow>

<!-- display this button in 3rd column via layout_column(zero based) -->

<TableRow

android:id="@+id/tableRow4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="5dip" >
 <Button

android:id="@+id/button4"

android:layout_column="2"

android:text="Column 3" />

</TableRow>

<!-- display this button in 2nd column via layout_column(zero based) -->

<TableRow

android:id="@+id/tableRow5"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="5dip" >

<Button

android:id="@+id/button5"

android:layout_column="1"

android:text="Column 2" />

</TableRow>

</TableLayout>