Customizing table style — django-tables2 2.0.0a3 documentation

# Customizing table style

## CSS

In order to use CSS to style a table, you'll probably want to add a `class` or `id` attribute to the `<table>` element. django-tables2 has a hook that allows arbitrary attributes to be added to the `<table>` tag.

    >>> import django_tables2 as tables
    >>>
    >>> class SimpleTable(tables.Table):
    ...     id = tables.Column()
    ...     age = tables.Column()
    ...
    ...     class Meta:
    ...         attrs = {'class': 'mytable'}
    ...
    >>> table = SimpleTable()
    >>> # renders to something like this:
    '<table class="mytable">...'

Also every column gets a class attribute, which by default is the same as the column's label. Also, by default, odd rows' class is `odd` and even rows' class is `even`. So rows of the `SimpleTable()` from previous example in django-tables2 default configuration will look like:

    <tr class="odd">
      <td class="id">...</td>
      <td class="age">...</td>
    </tr>
    <tr class="even">
      <td class="id">...</td>
      <td class="age">...</td>
    </tr>

You can also specify `attrs` attribute when creating a column. `attrs` is a dictionary which contains attributes which by default get rendered on various tags involved with rendering a column. You can read more about them in Column and row attributes. django-tables2 supports 3 different dictionaries, this way you can give different attributes to column tags in table header (`th`), rows (`td`) or footer (`tf`)

    >>> import django_tables2 as tables
    >>>
    >>> class SimpleTable(tables.Table):
    ...     id = tables.Column(attrs={'td': {'class': 'my-class'}})
    ...     age = tables.Column(attrs={'tf': {'bgcolor': 'red'}})
    ...
    >>> table = SimpleTable()
    >>> # renders to something like this:
    '<tbody><tr><td class="my-class">...</td></tr>'
    >>> # and the footer will look like this:
    '<tfoot><tr> ... <td class="age" bgcolor="red"></tr></tfoot>''

## Available templates

We ship a couple of different templates:

Template name | Description
--- | ---
django_tables2/table.html | Basic table template (default).
django_tables2/bootstrap.html | Template using bootstrap 3 structure/classes
django_tables2/bootstrap4.html | Template using bootstrap 4 structure/classes
django_tables2/bootstrap-responsive.html | Same as bootstrap, but wrapped in `.table-responsive`
django_tables2/semantic.html | Template using semantic UI

By default, django-tables2 looks for the `DJANGO_TABLES2_TEMPLATE` setting which is `django_tables2/table.html` by default.

If you use bootstrap 3 for your site, it makes sense to set the default to the bootstrap 3 template:

    DJANGO_TABLES2_TEMPLATE = 'django_tables2/bootstrap.html'

If you want to specify a custom template for selected tables in your project, you can set a `template_name` attribute to your custom `Table.Meta` class:

    class PersonTable(tables.Table):

        class Meta:
            model = Person
            template_name = 'django_tables2/semantic.html'

You can also use the `template_name` argument to the `Table` constructor to override the template for a certain instance:

    table = PersonTable(data, template_name='django_tables2/bootstrap-responsive.html')

For none of the templates any CSS file is added to the HTML. You are responsible for including the relevant style sheets for a template.

## Custom Template

And of course if you want full control over the way the table is rendered, ignore the built-in generation tools, and instead pass an instance of your `Table` subclass into your own template, and render it yourself.

You should use one of the provided templates as a basis.