Html Grid Table

Posted onby admin

Defining a Grid To define a grid use new values of the display property `grid` or `inline-grid`. You can then create column and row tracks. Forget About Table Cellspacing In HTML (And Learn The CSS Now) Was used to specify the distance between the individual cells of an HTML table. This element has been deprecated and CSS should be used to control table layout. Why Table Bgcolor Is No Longer Valid Code (And What To Use Instead) Was used to set the background color of an HTML table.

HTML tables allow web developers to arrange data into rows and columns.

Example

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly
Try it Yourself »

Define an HTML Table

The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.

Html Grid Table

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

Example

A simple HTML table:

Html Table Gridlines

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Try it Yourself »

Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

HTML Table - Add a Border

To add a border to a table, use the CSS border property:

Example

Try it Yourself »

Remember to define borders for both the table and the table cells.

Html Grid Table Or Div

HTML Table - Collapsed Borders

To let the borders collapse into one border, add the CSS border-collapse property:

Example

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Try it Yourself »

HTML Table - Add Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example

Try it Yourself »

HTML Table - Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example

Try it Yourself »

HTML Table - Add Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example

Try it Yourself »

Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table - Cell that Spans Many Columns

To make a cell span more than one column, use the colspan attribute:

Example

<table>
<tr>
<th>Name</th>
<th colspan='2'>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
Try it Yourself »

HTML Table - Cell that Spans Many Rows

To make a cell span more than one row, use the rowspan attribute:

Example

<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan='2'>Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
Try it Yourself »

HTML Table - Add a Caption

To add a caption to a table, use the <caption> tag:

Example

<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Try it Yourself »

Note: The <caption> tag must be inserted immediately after the <table> tag.

A Special Style for One Table

To define a special style for one particular table, add an id attribute to the table:

Example

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Now you can define a special style for this table:

#t01 {
width: 100%;
background-color: #f1f1c1;
}
Try it Yourself »

And add more styles:

#t01 tr:nth-child(even) {
background-color: #eee;
}
#t01 tr:nth-child(odd) {
background-color: #fff;
}
#t01 th {
color: white;
background-color: black;
}
Try it Yourself »

Chapter Summary

  • Use the HTML <table> element to define a table
  • Use the HTML <tr> element to define a table row
  • Use the HTML <td> element to define a table data
  • Use the HTML <th> element to define a table heading
  • Use the HTML <caption> element to define a table caption
  • Use the CSS border property to define a border
  • Use the CSS border-collapse property to collapse cell borders
  • Use the CSS padding property to add padding to cells
  • Use the CSS text-align property to align cell text
  • Use the CSS border-spacing property to set the spacing between cells
  • Use the colspan attribute to make a cell span many columns
  • Use the rowspan attribute to make a cell span many rows
  • Use the id attribute to uniquely define one table

HTML Exercises

HTML Table Tags

TagDescription
<table>Defines a table
<th>Defines a header cell in a table
<tr>Defines a row in a table
<td>Defines a cell in a table
<caption>Defines a table caption
<colgroup>Specifies a group of one or more columns in a table for formatting
<col>Specifies column properties for each column within a <colgroup> element
<thead>Groups the header content in a table
<tbody>Groups the body content in a table
<tfoot>Groups the footer content in a table

For a complete list of all available HTML tags, visit our HTML Tag Reference.



Displaying data in a tabular format is one of the most developed feature in any applications we develop. Asp.Net MVC gave a greater flexibility to control the output HTML rendering which help developers to customize the page HTML easily. Developers can now build their own UI without using the inbuilt Asp.Net controls with less HTML markups. For repetitive display tasks, we can use Partial Views, HTML helpers that can help to build re-usable view components. Though, it is very easy to create Grid display component ourselves there are some free and easy to use Grid components available with great features that could save our development time. In this article, let’s use a free Grid control called Grid.Mvc which will help us to add sort, filter and paging very easily. Sample screenshots below,

Grid with Sortable columns, Paging and Filters:

Filtering a column:

First, let’s create a new project in Visual Studio and add the required Nuget packages. I have used an Asp.Net MVC 5.0 Empty project template in this article. We require the following Nuget packages to build this Grid in our project,

  1. Grid.Mvc

  2. Bootstrap – Used by the Grid.Mvc package.

To add this packages, right click you project in solution explorer and click “Manage Nuget Packages..”. In the search textbox enter “Grid.Mvc”. Click Install button once you get the results. Repeat this step to add Bootstrap package.

The Gird.Mvc would have added the below things in your project.

- Views/Shared/_Grid.cshtml, Views/Shared/_GridPager.cshtml - views for grid

- Content/Gridmvc.css - default stylesheet for the grid

- Scripts/gridmvc.js, Scripts/gridmvc.min.js - Grid.Mvc scripts

- Reference GridMvc.dll

Note – We will use an EF code first for data access. I have created simple Employee-Department model with some sample data in this article. We need EntityFramework Nuget package for this. You can download the attached project and see the relevant objects and code used for data access.

Let’s add the required stylesheets, scripts into our Layout page. The bootstrap stylesheet, script and jQuery reference can be added in the Layout page. We also can register a script and css section using @RenderSection HTML helper. This will help us to render the page specific scripts and css files from the content views.

Layout page below,

<!DOCTYPE html>

<html>

<head>

<meta name='viewport' />

<title>@ViewBag.Title</title>

<link href='~/Content/bootstrap.css' />

@RenderSection('css', required: false)

</head>

<body>

<div>

@RenderBody()

</div>

<script src='~/Scripts/jquery-1.9.1.min.js'></script>

<script src='~/Scripts/bootstrap.min.js'></script>

@RenderSection('scripts', required: false)

Html Grid Table

</body>

</html>

Using Grid.Mvc Auto Generate Columns

Let’s use Grid.Mvc component to generate the columns automatically from the Model in this section. We will also enable Sorting, paging and filters on the column.

Controller:

public ActionResult GetAllEmployeeData()

{

return View(db.Employees.OrderBy(e => e.EmployeeId));

}

View:

@model IEnumerable<GridDemo.Models.Employee>

@using GridMvc.Html

@{

Html Code For Grid

ViewBag.Title = 'Index';

Layout = '~/Views/Shared/_Layout.cshtml';

}

@section css {

<link href='@Url.Content('~/Content/Gridmvc.css')' type='text/css' />

}

<h2>MVC Grid</h2>

<div>

@Html.ActionLink('Index', 'Index')

</div>

<div>

@Html.Grid(Model).AutoGenerateColumns().Sortable().Filterable().WithPaging(3)

</div>

@section Scripts {

<script src='@Url.Content('~/Scripts/gridmvc.min.js')' type='text/javascript'> </script>

}

Apart from the scrips and stylesheets, we also need to include GridMvc.Html namespace for the Grid. This will generate the grid with all the columns in the model.

Using Grid.Mvc with Custom Columns

Let’s use Grid.Mvc component to generate columns manually. The first column will be a hidden column to include primary keys in the row which are generally not required to display. The second column will display the full name and the third will generate a link to view the full employee data in a detail view.

Controller

public ActionResult GetAllEmployeeWithDetails()

{

return View(db.Employees.OrderBy(e => e.EmployeeId));

}

Html Table Grid Border

View

@model IEnumerable<GridDemo.Models.Employee>

@using GridMvc.Html

@{

ViewBag.Title = 'Index';

Layout = '~/Views/Shared/_Layout.cshtml';

}

@section css {

<link href='@Url.Content('~/Content/Gridmvc.css')' type='text/css' />

}

<h2>MVC Grid</h2>

<div>

@Html.ActionLink('Index','Index')

Html Table Gridlines

</div>

<div>

@Html.Grid(Model).Columns(columns =>

{

columns.Add(col => col.EmployeeId, true);

columns.Add(col => col.FirstName).Titled('Name').RenderValueAs(col => String.Format('{0} {1}', col.FirstName, col.LastName)).Sortable(true).Filterable(true);

columns.Add().Encoded(false).Sanitized(false)

.RenderValueAs(col =>

@<b>

@Html.ActionLink('View', 'EmployeeDetail', new { Id = col.EmployeeId }, null)

</b>);

}

)

</div>

@section Scripts {

<script src='@Url.Content('~/Scripts/gridmvc.min.js')' type='text/javascript'> </script>

}

When executed, this will generate a table like this,

Download the source and see it in action!