Shortcode Table

Tables

Table normal

# Column heading Column heading Column heading Column heading Action
1 Column content Column content Column content Column content
2 Column content Column content Column content Column content
3 Column content Column content Column content Column content
4 Column content Column content Column content Column content
5 Column content Column content Column content Column content
6 Column content Column content Column content Column content
{html:table class="table"}
    {html:tr}
        {html:th}# {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Action {/html:th}
    {/html:tr}
    {html:tr class="info"}
        {html:td}1 {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}
            {html:button class='btn btn-success btn-xs' }Edit {/html:button} {html:i} {html:i}
            {html:button class='btn btn-danger btn-xs' }Delete {/html:button}
        {/html:td}
    {/html:tr}
    {html:tr class="success"}
        {html:td}2 {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}
            {html:button class='btn btn-success btn-xs' }Edit {/html:button} {html:i} {html:i}
            {html:button class='btn btn-danger btn-xs' }Delete {/html:button}
        {/html:td}
    {/html:tr}
    {html:tr class="active"}
        {html:td}3 {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}
            {html:button class='btn btn-success btn-xs' }Edit {/html:button} {html:i} {html:i}
            {html:button class='btn btn-danger btn-xs' }Delete {/html:button}
        {/html:td}
    {/html:tr}
    {html:tr class="warning"}
        {html:td}4 {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}
            {html:button class='btn btn-success btn-xs' }Edit {/html:button} {html:i} {html:i}
            {html:button class='btn btn-danger btn-xs' }Delete {/html:button}
        {/html:td}
    {/html:tr}
    {html:tr class="danger"}
        {html:td}5 {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}
            {html:button class='btn btn-success btn-xs' }Edit {/html:button} {html:i} {html:i}
            {html:button class='btn btn-danger btn-xs' }Delete {/html:button}
        {/html:td}
    {/html:tr}
    {html:tr}
        {html:td}6 {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}
            {html:button class='btn btn-success btn-xs' }Edit {/html:button} {html:i} {html:i}
            {html:button class='btn btn-danger btn-xs' }Delete {/html:button}
        {/html:td}
    {/html:tr}
{/html:table}

Table bordered

# Column heading Column heading Column heading Column heading Action
1 Column content Column content Column content Column content
2 Column content Column content Column content Column content
3 Column content Column content Column content Column content
4 Column content Column content Column content Column content
5 Column content Column content Column content Column content
6 Column content Column content Column content Column content
{html:table class="table table-bordered"}
    {html:tr}
        {html:th}# {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Action {/html:th}
    {/html:tr}
    {html:tr}
        {html:td}1 {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}
            {html:button class='btn btn-success btn-xs' }Edit {/html:button} {html:i} {html:i}
            {html:button class='btn btn-danger btn-xs' }Delete {/html:button}
        {/html:td}
    {/html:tr}
    ...................
{/html:table}

Table hover

# Column heading Column heading Column heading Column heading Action
1 Column content Column content Column content Column content
2 Column content Column content Column content Column content
3 Column content Column content Column content Column content
4 Column content Column content Column content Column content
5 Column content Column content Column content Column content
6 Column content Column content Column content Column content
{html:table class="table table-hover"}
    {html:tr}
        {html:th}# {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Action {/html:th}
    {/html:tr}
    {html:tr}
        {html:td}1 {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}
            {html:button class='btn btn-success btn-xs' }Edit {/html:button} {html:i} {html:i}
            {html:button class='btn btn-danger btn-xs' }Delete {/html:button}
        {/html:td}
    {/html:tr}
    ...................
{/html:table}

Table striped

# Column heading Column heading Column heading Column heading Action
1 Column content Column content Column content Column content
2 Column content Column content Column content Column content
3 Column content Column content Column content Column content
4 Column content Column content Column content Column content
5 Column content Column content Column content Column content
6 Column content Column content Column content Column content
{html:table class="table table-striped"}
    {html:tr}
        {html:th}# {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Action {/html:th}
    {/html:tr}
    {html:tr}
        {html:td}1 {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}
            {html:button class='btn btn-success btn-xs' }Edit {/html:button} {html:i} {html:i}
            {html:button class='btn btn-danger btn-xs' }Delete {/html:button}
        {/html:td}
    {/html:tr}
    ...................
{/html:table}

Table condensed

# Column heading Column heading Column heading Column heading Action
1 Column content Column content Column content Column content
2 Column content Column content Column content Column content
3 Column content Column content Column content Column content
4 Column content Column content Column content Column content
5 Column content Column content Column content Column content
6 Column content Column content Column content Column content
{html:table class="table table-condensed"}
    {html:tr}
        {html:th}# {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Action {/html:th}
    {/html:tr}
    {html:tr}
        {html:td}1 {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}
            {html:button class='btn btn-success btn-xs' }Edit {/html:button} {html:i} {html:i}
            {html:button class='btn btn-danger btn-xs' }Delete {/html:button}
        {/html:td}
    {/html:tr}
    ...................
{/html:table}

Table responsive

# Column heading Column heading Column heading Column heading Action
1 Column content Column content Column content Column content
2 Column content Column content Column content Column content
3 Column content Column content Column content Column content
4 Column content Column content Column content Column content
5 Column content Column content Column content Column content
6 Column content Column content Column content Column content
{html:table class="table table-responsive"}
    {html:tr}
        {html:th}# {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Column heading {/html:th}
        {html:th}Action {/html:th}
    {/html:tr}
    {html:tr}
        {html:td}1 {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}Column content {/html:td}
        {html:td}
            {html:button class='btn btn-success btn-xs' }Edit {/html:button} {html:i} {html:i}
            {html:button class='btn btn-danger btn-xs' }Delete {/html:button}
        {/html:td}
    {/html:tr}
    ...................
{/html:table}